step1：在build文件夾下新建 webpack.dll.conf.js 文件(即和webpack.base.conf.js同級)
const path = require('path')
const webpack = require('webpack');
module.exports = {
output: {
filename: 'dll/[name].dll.js',
path: path.resolve(__dirname, '../static/js/'),
library: '[name]_library', // 當前Dll的所有內容都會存放在這個參數指定變量名的一個全局變量下，注意與DllPlugin的name參數保持一致
},
plugins: [
new webpack.DllPlugin({
path: path.resolve(__dirname, './manifest.json'), // 本Dll文件中各模塊的索引，供DllReferencePlugin讀取使用
name: '[name]_library',
}),
],
}
step2:在webpack.base.conf.js文件中配置
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/main.js'
},
//.......
plugins: [
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, '..'),
manifest: require('./manifest.json')
})
],
}
step3:在package.json文件script中添加
"scripts": {
"dll": "webpack -p --progress --config build/webpack.dll.conf.js",
},
step4:在index.html中引入 vendor.dll.js 文件
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="./static/js/dll/vendor.dll.js"></script>
</body>
step5:在打包之前首先運行npm run dll (只需運行一次即可，只要package.json中dependencies的依賴包(即通過import引入的依賴包)沒有變化)
npm run dll（只運行一次即可）
npm run build（首次打包時間較長，後續打包時間明顯減少）