溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面
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
存在問題
demo
基于本文理論的一個demo，地址：webpack-multipage-demo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
