首先：
在项目根目录新建一个文件webpack.dll.config.js
var path = require('path');
var webpack = require('webpack');
var config = require('../config');
module.exports = {
entry: {
//用到的第三方插件
vendor: ['vue-router','vuex','axios','vue','vue-swipe','jquery']
},
output: {
path: path.resolve('./dist'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.resolve('./dist', '[name]-manifest.json'),
name: '[name]_library'
})
]
}
然后：在webpack.base.conf.js中添加代码
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./../dist/vendor-manifest.json')
})
]
还需要在入口html文件中引入vendor.dll.js
<script src="vendor.dll.js"></script>
然后在package.json文件中添加快捷命令(粗体字）：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build:dll": "webpack --config webpack.dll.config.js"
},
最后打包的时候首先执行npm run build:dll命令会在打包目录dist文件夹下生成
vendor-manifest.json文件与vendor.dll.js文件。
Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。
打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。
然后在执行npm run build
网友评论