轉(zhuǎn)載自:
作者：Stark偉
鏈接：https://zhuanlan.zhihu.com/p/21748318
上面我們提到的方法本質(zhì)上就是一種“動態(tài)鏈接庫（dll）”的思想，這在 windows 系統(tǒng)下面是一種很常見的思想。一個 dll 包，就是一個很純凈的依賴庫，它本身不能運行，是用來給你的 app 或者業(yè)務(wù)代碼引用的。
同樣的 Webpack 最近也新加入了這個功能：webpack.DllPlugin。使用這個功能需要把打包過程分成兩步：
打包ddl包
引用ddl包，打包業(yè)務(wù)代碼
首先我們來打包ddl包，首先配置一個這樣的 ddl.config.js：
const webpack = require('webpack');const vendors = [
'react',
'react-dom',
'react-router',
// ...其它庫];module.exports = {
output: {
path: 'build',
filename: '[name].js',
library: '[name]',
},
entry: {
"lib": vendors,
},
plugins: [
new webpack.DllPlugin({
path: 'manifest.json',
name: '[name]',
context: __dirname,
}),
],};
webpack.DllPlugin 的選項中：
path 是 manifest.json 文件的輸出路徑，這個文件會用于后續(xù)的業(yè)務(wù)代碼打包；
name 是 dll 暴露的對象名，要跟 output.library 保持一致；
context 是解析包路徑的上下文，這個要跟接下來配置的 webpack.config.js 一致。
運行Webpack，會輸出兩個文件一個是打包好的 lib.js，一個就是 manifest.json，它里面的內(nèi)容大概是這樣的：
{
"name": "vendor_ac51ba426d4f259b8b18",
"content": {
"./node_modules/react/react.js": 1,
"./node_modules/react/lib/React.js": 2,
"./node_modules/react/node_modules/object-assign/index.js": 3,
"./node_modules/react/lib/ReactChildren.js": 4,
"./node_modules/react/lib/PooledClass.js": 5,
"./node_modules/react/lib/reactProdInvariant.js": 6,
// ............
}}
接下來我們就可以快樂地打包業(yè)務(wù)代碼啦，首先寫好打包配置文件 webpack.config.js：
const webpack = require('webpack');module.exports = {
output: {
path: 'build',
filename: '[name].js',
},
entry: {
app: './src/index.js',
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./manifest.json'),
}),
],};
webpack.DllReferencePlugin 的選項中：
context 需要跟之前保持一致，這個用來指導(dǎo) Webpack 匹配 manifest.json 中庫的路徑；
manifest 用來引入剛才輸出的 manifest.json 文件。
DllPlugin 本質(zhì)上的做法和我們手動分離這些第三方庫是一樣的，但是對于包極多的應(yīng)用來說，自動化明顯加快了生產(chǎn)效率。
