在項目開發(fā)中總會使用第三方庫捅膘，這些第三方庫一般是不會改變的娃闲，所以不需要每次進行編譯忆矛，webpack可以把這部分公用的代碼單獨打包出來
1利用DllPlugin打包出一個公用的Dll文件,除了Dll文件媳维，DllPlugin還會生成一個manifest.json文件作為公用代碼索引供DllReferencePlugin使用
2在業(yè)務(wù)代碼的webpack中配置好DllReferencePlugin,達(dá)到Dll文件與業(yè)務(wù)代碼關(guān)聯(lián)
3在頁面文件中攻晒，先載入Dll文件寂嘉，然后載入業(yè)務(wù)代碼文件
先建立一個webpack.dll.config.js文件
var path = require('path');
var webpack = require('webpack');
module.exports= {
entry: {
vendors:['react','react-dom'] //需要公用的第三方庫
},
output: {
path: path.resolve(__dirname, './dist'), //文件輸出的路徑
filename: "[name].dll.js",
library: "[name]" //生成一個變量名供dllreference調(diào)用要與dllPlugin.name保持一致
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname,'./dist/manifest.json'),//生成manifest.json文件的路徑
name:"[name]",
context:__dirname
})
]
}
webpack --config ./webpack.dll.config.js進行編譯
這時候文件會生成一個dist文件里面會有一個vendors.dll.js和manifest.json文件
在業(yè)務(wù)的webpack文件中配置DllReferencePlugin
var path = require('path');
var webpack = require('webpack');
module.exports={
entry: {
index:'./src/index.jsx'
},
output: {
path:path.resolve(__dirname,'./dist'),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test:/\.css$/,
use:[
'style-loader', 'css-loader'
]
},
{
test:/\.(js|jsx)$/,
exclude:/(node_modules|bower_components)/,
use:[
{
loader:'babel-loader',
options:{
presets:['env','react']
}
}
]
}
]
},
plugins: [
new webpack.DllReferencePlugin({
context:__dirname,
manifest:require('./dist/manifest.json'),//通過require引入manifest.json文件
name:'vendors'//引入dll文件的變量名
})
]
}
這時候進行編譯你會發(fā)現(xiàn)我們的公用代碼是delegated （委派）進去的奏瞬，而不是直接打包進bundle.js文件中
