webpack-dllreferenceplugin使用

webpack-dllreferenceplugin使用
1、 首先在vue的build文件夹下，新建一个webpack.dll.config.js文件，存放dll的配置文件：
例如：
var path = require(“path”);
var webpack = require(“webpack”);

module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: [‘vue’, ‘vuex’, ‘vue-router’, ‘element-ui’]
},
output: {
path: path.join(__dirname, ‘…/static/lib’), // 打包后文件输出的位置
filename: ‘[name].dll.js’,
library: ‘[name]_library’
// vendor.dll.js中暴露出的全局变量名。
// 主要是给DllPlugin中的name使用，
// 故这里需要和webpack.DllPlugin中的name: '[name]_library',保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, ‘…’, ‘[name]-manifest.json’),
name: ‘[name]_library’,
context: __dirname
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
注：其中的几个注意的地方就是path，然后就是context，选择__dirname就是了。
2、 在package.json中添加scripts命令
“dll”:“webpack –config build/webpack.dll.config.js”,
运行npm run dll生成vendor-manifest.json
3、 将vue中默认的webpack.prod.conf.js中的CommonsChunkPlugin插件相关内容注释掉。
4、 加入DllReferencePlugin插件
new webpack.DllReferencePlugin({
context: __dirname,
manifest: path.join(__dirname, ‘…’, ‘vendor-manifest.json’),
})
注：context和第一步文件中的context一致，manifest标志了manifest的路径
5、 修改前台index.html页面引入的js文件，将
原先的：

两个文件的引入注释掉，
增加：

一个文件的引入。
注意：

1. vendor.dll.js路径。
2. 如果使用的是HtmlWebpackPlugin插件自动生成的index.html，需要在模板中手动引入以上的vendor.dll.js。
3. 为了避免出现vue开发环境的警告，需要在webpack.dll.js配置时添加DefinePlugin插件，像webpack.prod.conf.js中配置一样，其实意思就是说，你要为新生成的dll.js做哪些操作。