前言
在用 Webpack 打包的時(shí)候，對(duì)于一些不經(jīng)常更新的第三方庫(kù)，比如 react，lodash，我們希望能和自己的代碼分離開，Webpack 社區(qū)有兩種方案
- CommonsChunkPlugin
- DLLPlugin
對(duì)于 CommonsChunkPlugin，webpack 每次打包實(shí)際還是需要去處理這些第三方庫(kù)，只是打包完之后，能把第三方庫(kù)和我們自己的代碼分開。而
DLLPlugin 則是能把第三方代碼完全分離開，即每次只打包項(xiàng)目自身的代碼。
用法
要使用 DLLPlugin，需要額外新建一個(gè)配置文件。所以對(duì)于用這種方式打包的項(xiàng)目，一般會(huì)有下面兩個(gè)配置文件
- webpack.config.js
- webpack.dll.config.js
先來看下 webpack.dll.config.js
const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
entry: {
vendors: ['react', 'lodash']
},
output: {
filename: '[name].dll.js',
path: 'dist/',
library
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'dist/[name]-manifest.json'),
// This must match the output.library option above
name: library
}),
],
}
再改下 webpack.config.js 文件
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index'
},
output: {
filename: 'app.bundle.js',
path: 'dist/',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendors-manifest.json')
})
]
}
manifest: require('./dist/vendors-manifest.json') 這里的路徑要和 webpack.dll.config.js 里面的對(duì)應(yīng)。
然后運(yùn)行
$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js
然后你的 html 文件像下面這樣引用
<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>
DLL Link Plugin
上面的用法也存在一些不方便的地方，比如在 webpack.config.js 中要明確指出對(duì)應(yīng)的 manifest.json 文件。還有當(dāng) DLL 需要更新的時(shí)候，比如 react 升級(jí)了，或者加入新的第三方庫(kù)，都需要手動(dòng)像下面這樣編譯一次。
$ webpack --config webpack.dll.config.js
因?yàn)樯厦孢@些問題，所以基于官方的 DllReferencePlugin，我寫了一個(gè)打包的插件，Dll Link Plugin。
使用這個(gè)插件，只需要對(duì) webpack.config.js 作下小小的改動(dòng)
const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')
module.exports = {
// ...
plugins: [
new DllLinkPlugin({
config: require('webpack.dll.config.js')
})
]
}
直接替換掉 DllReferencePlugin，然后傳入對(duì)應(yīng)的 DLL 配置文件就可以了。每次打包的時(shí)候，只需要運(yùn)行
$ webpack --config webpack.config.js
上面的命令便會(huì)自動(dòng)生成對(duì)應(yīng)的 vendors 文件，需要更新的時(shí)候，也會(huì)自動(dòng)更新。
如果在使用插件的過程中遇到什么問題，歡迎到 Github 上面給我提 issue
