主要參考官網 Getting Started
本篇內容延續 Webpack2 入門(2)
本篇主要介紹：如何將我們原本打包成單一 bundle.js 改成打包成 main.js 以及 vendor.js
Getting started
在開發的過程中，我們引用的模組 node_modules 的變動頻率往往沒有我們的程式碼頻繁。如果我們每次都整個打包成 bundle.js，會造成此檔案太過大包而且打包時間相對過久。因此我們可以將載入的模組另外打包成 vendor.js，我們的程式碼打包成 main.js。
打包 Main.js 及 Vendor.js
CommonsChunkPlugin(See more)
修改後的 webpack.config.js 如下：
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: {
main: './app/index.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist') // 打包到哪個資料夾
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', // Specify the common bundle's name.
minChunks: function(module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
]
};
執行
$ npm run build此時我們會看到 dist 資料夾底下會有 main.js & vendor.js。
修改我們的 index.html 如下：
index.html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<a href="http://dist/vendor.js">http://dist/vendor.js</a>
<a href="http://dist/main.js">http://dist/main.js</a>
</body>
</html>
以上就完成了，結果與只打包成 bundle.js 相同