前言
之前寫過這篇 webpack，單一設定 webpack 的方式，一般來說為了減少 request，所以會希望將 js 檔案 compile 成一個，這種條件你不是從頭到尾打造這個網站的作者，了解每個頁面 dom 布局的話是相當困難的，而且從 HTTP/2 的新標準出現以後，這招已經沒有明顯的優勢了，可以參考 「你的網站升級到 HTTP/2 了嗎？」這篇文章。
所以這篇文章會重新教學怎麼設定，讓你每個網頁有屬於自己的 js 檔案，但共用的套件如 jQuery 或 bootstrap 卻可以獨立，減少獨立檔案的大小。
安裝相關套件
npm i --save-dev webpack babel-core babel-loader babel-preset-es2015
npm i --save jquery bootstrap
目前主要還是用 babel 編譯較新穎的 JavaScript 語法。
檔案布局
webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
a: path.resolve(__dirname, 'js/src/a'),
b: path.resolve(__dirname, 'js/src/b'),
vendor: ['jquery', 'bootstrap']
},
output: {
path: path.resolve(__dirname, 'js/build/'),
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
這個設定檔預計要將 js/src/ 下的 a.js 以及 b.js compile 到 js/build/，並將 jQuery 以及 bootstrap 抽出來成為 vendor，設定完成後，在根目錄執行 webpack，編譯後在 js/build/ 下會看到 a.js, b.js, vendor.bundle.js 三個檔案。
.babelrc
{
"presets": ["es2015"]
}
這是 babel 的設定檔。
js/src/a.js
$(function() {
$('body').append('this is a');
});
js/src/b.js
$(function() {
$('body').append('this is a');
});
js/src/b.js
$(function() {
$('body').append('this is b');
});
a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack page a</title>
<script src="js/build/vendor.bundle.js"></script>
<script src="js/build/a.js"></script>
</head>
<body>
<h3>this is a</h3>
</body>
</html>
b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack page b</title>
<script src="js/build/vendor.bundle.js"></script>
<script src="js/build/b.js"></script>
</head>
<body>
<h3>this is b</h3>
</body>
</html>
執行 a.html以及 b.html 就會看到各自的效果了。