webpack多頁(yè)面開(kāi)發(fā)實(shí)踐

├─dist #打包后生成的文件目錄
└─src #開(kāi)發(fā)目錄
 ├─components #通用組件
 ├─static #靜態(tài)資源目錄
 │ ├─css
 │ ├─img
 │ └─js
 │ ├─component #站點(diǎn)通用組件對(duì)應(yīng)的js
 │ ├─lib #第三方j(luò)s庫(kù)
 │ ├─services #各頁(yè)面入口
 │ └─util #通用工具js
 ├─template #html模板
 └─views #頁(yè)面
 main.js #公共入口
gulpfile.js #gulp任務(wù)配置
package.json #項(xiàng)目依賴
webpack.config.js #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;
})();

entry: {
 'page-1': '/../webpack-multipage-demo/src/static/js/services/page-1.js'
}

//服務(wù)器配置
var devServer = env === 'production' ? {} : {
 contentBase: path.resolve(__dirname),
 compress: true,
 historyApiFallback: true,
 hot: true,
 inline: true,
 host: 'localhost', 
 port: 8080
};

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;
})();