前言
在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，我们希望能和自己的代码分离开，Webpack 社区有两种方案
- CommonsChunkPlugin
- DllPlugin
对于 CommonsChunkPlugin，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而DllPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。
用法
要使用 DllPlugin，需要额外新建一个配置文件。所以对于用这种方式打包的项目，一般会有下面两个配置文件
- webpack.config.js
- webpack.dll.config.js
先来看下 webpack.dll.config.js
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
}),],}
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 文件
module.exports = {
entry: {
app: './src/index'
},output: {
filename: 'app.bundle.js',},plugins: [
new webpack.DllReferencePlugin({
context: __dirname,manifest: require('./dist/vendors-manifest.json')
})
]
}
entry: {
app: './src/index'
},output: {
filename: 'app.bundle.js',},plugins: [
new webpack.DllReferencePlugin({
context: __dirname,manifest: require('./dist/vendors-manifest.json')
})
]
}
manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。
然后运行
然后你的 html 文件像下面这样引用
