本项目是用vue-cli脚手架搭建的,
webpack的版本是3.12.0 ;
vue-cli的版本是2.96;
第一步:在根目录的build文件夹新建一个 webpack.dll.conf.js 文件,代码如下:
var path = require('path')
var webpack = require('webpack')
var context = path.join(__dirname, '..')
module.exports = {
entry: {
vendor: [ //这里是要提取的资源文件,因为这些是不会改动的代码
'vue/dist/vue.esm.js',
'vuex',
'vue-router',
'axios',
'element-ui'
]
},
output: {
path: path.join(context, 'static/js'), // 打包后的 vendor.js放入 static/js 路径下
filename: '[name].dll.js',
library: '[name]',
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new webpack.DllPlugin({
path: path.join(context, '[name].manifest.json'),
name: '[name]',
context: context
}),
// 压缩js代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: { // 删除打包后的注释
comments: false
}
})
]
}
接着第二步:在package.json文件里面添加一个配置
//在scripts中多加一个dll的配置,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"dll": "webpack --config build/webpack.dll.conf.js --progress"
},
//添加完成后执行 npm run dll 命令,命令执行成功后:
//会在根目录的static/js文件夹下面生成一个vendor.dll.js的文件,
//同时还会在根目录下生成一个vendor.mainfest.json的文件
接着第三步:在index.html里面引入刚刚生成的这个verdor.dll.js文件:
接着是第四步:在build文件夹下的webpack.base.conf.js添加几行代码:
//先在文件的头部 引入一下webpack
const webpack = require('webpack');
//然后在插件配置plugins里面多加一个 webpcak.DLLReferencePlugin
plugins: [
new webpack.DllReferencePlugin({
// name参数和dllplugin里面name一致,可以不传
name: 'vendor',
// dllplugin 打包输出的manifest.json
manifest: require('../vendor.manifest.json'),
// 和dllplugin里面的context一致
context: path.join(__dirname, '..')
})
],
接着是第五步:在build文件夹下的webpack.prod.conf.js 修改几行代码:
//主要是把CommonsChunkPlugin相关的代码注释掉
//使用了dll后 不需要在编译了,因为在vendor.dll.js中编译好了
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks(module) {
// // any required modules inside node_modules are extracted to vendor
// return (
// module.resource &&
// /\.js$/.test(module.resource) &&
// module.resource.indexOf(
// path.join(__dirname, '../node_modules')
// ) === 0
// )
// }
// }),
//使用了dll后 不需要在编译了,因为在vendor.dll.js中编译好了
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// minChunks: Infinity
// }),
以上五个步骤步完成后,就可以在 终端 执行 npm run build 命令 打包文件了,可以看到速度比较之前 快了一些。注意:第五步一定要做,否则打包好的文件在服务器上运行会报加载错误!