這篇文章主要介紹了webpack多頁面開發實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
寫在前面
webpack是一款模組載入器兼打包工具，能把js,css,頁面，圖片，視訊等各種資源，進行模組化處理。而現在網路上流傳很多單頁的webpack模型，那多頁呢？比較少，現在我提供一個多頁面的前端模型。希望大家適合使用。
在最開始接觸webpack的時候，我都覺得webpack只適用於單一頁面應用，像是webpack react，webpack vue。我自己在使用webpack vue建構專案及開發的過程中感受到了webpack的強大與方便。基於實際專案需求，我在想，多頁面網站是否也能使用webapck來建置呢？於是就開始了一番探索，最後算是搭建了一套比較完整的解決方案。
本文以一個實際專案為例子，講述在多頁面專案中如何使用webpack進行工程化建構。本文是自己的實務經驗總結，所以有些解決方案並不是最優的，仍在探索優化中，如果有任何錯誤紕漏，歡迎指出。
簡介
本專案主要基於webpack2.x構建，以gulp作為輔助工具。前端使用art-template作為模板引擎，一個頁面對應一個模板檔案和一個入口文件，入口文件中可以透過import或require引入其他模組，這些模組webpack會自動跟入口文件合併為一個文件。
前端開發環境建構
主要目錄結構
├─dist #打包后生成的文件目录 └─src #开发目录 ├─components #通用组件 ├─static #静态资源目录 │ ├─css │ ├─img │ └─js │ ├─component #站点通用组件对应的js │ ├─lib #第三方js库 │ ├─services #各页面入口 │ └─util #通用工具js ├─template #html模板 └─views #页面 main.js #公共入口 gulpfile.js #gulp任务配置 package.json #项目依赖 webpack.config.js #webpack配置
webpack配置
入口檔案
// 获取入口文件
var entries = (function() {
var jsDir = path.resolve(__dirname, 'src/static/js/services');
var entryFiles = glob.sync(jsDir + '/*.js');
var map = {};
entryFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
map[filename] = filePath;
});
return map;
})();這個方法將產生檔名到檔案絕對路徑的map， 例如
entry: {
'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}#熱更新
熱更新簡直不要太好用，極大提高了開發效率。
//服务器配置
var devServer = env === 'production' ? {} : {
contentBase: path.resolve(__dirname),
compress: true,
historyApiFallback: true,
hot: true,
inline: true,
host: 'localhost',
port: 8080
};另外，在plugin中加入new webpack.HotModuleReplacementPlugin()，開啟Hot Module Replacemen，即可實現熱更新。
產生html設定
約定相同頁面的js檔案與範本檔案命名一致，最後根據該js產生與其同名的html檔案。
var htmlPages = (function() {
var artDir = path.resolve(__dirname, 'src/views');
var artFiles = glob.sync(artDir + '/*.art');
var array = [];
artFiles.forEach(function(filePath) {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
array.push(new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/template/index.html'),
filename: filename + '.html',
chunks: ['vendor', 'main', filename],
chunksSortMode: function(chunk1, chunk2) {
var order = ['vendor', 'main', filename];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 - order2;
},
minify: {
removeComments: env === 'production' ? true : false,
collapseWhitespace: env === 'production' ? true : false
}
}));
});
return array;
})();通用模組提取為元件
對於在多個頁面中都需要用到的一些模組，可將其提取出來作為通用的元件。元件的構成與頁面一樣，一個.js檔案和一個.art檔案以及一個.css文件，在js檔案中渲染html內容，最後export，使用時直接require即可。具體實踐可參考demo
存在問題
#每新建一個頁面就需要重新啟動webpack服務
字體檔案無法壓縮，對於壓縮透過font-face引入的網頁字體，目前沒有找到較好的解決方案
demo
#基於本文理論的demo，地址：webpack-multipage-demo
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
#以上是在webpack中如何實現多頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
