webpack升级
前情描述
项目从2017年开始，采用的是webpack2.2.1版本+vue等的技术架构，由于工作较忙及业务较多项目越来越大，一直疏于对webpack进行升级，导致构建时间越来越长，最近终于有时间，构建时间也有了一个质的飞跃，从5分钟的打包时间缩短到了1分钟。当然再此之前也有过相应的打包优化升级历史。
优化历史
Dll方式：dynamic link library（动态链接库）
dll方式也就是通过配置，提前把不会变动的公共依赖单独构建打包，告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内。
webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能。
1、提取webpack.dll.config.js文件
/*
* @Description:
* @Author: (jiaobingqian)
* @Email: jiaobq123@163.com
* @Date: 2018-12-11 14:25:36
* @LastEditTime: 2019-02-19 15:16:20
* @LastEditors: (jiaobingqian)
*/
//快速打包优化方案：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
vendor: [
'vue/dist/vue.esm.js',
'vue-router',
'element-ui',
'clipboard',
'file-saver',
'xlsx'
]
},
output: {
path: path.join(__dirname, '../static/js'), //放在项目的static/js目录下面
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'), //生成上文说到清单文件，放在当前build文件下面，这个看你自己想放哪里了。
name: '[name]_library'
}),
//压缩 只是为了包更小一点
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
drop_debugger: true
},
output: {
// 去掉注释内容
comments: false
},
sourceMap: true
})
]
};2、打包构建dll公共模块（生成到一个独立目录，正式打包copy到build正式目录dist）
3、配置webpack.pro.conf.js文件
webpack.DllReferencePlugin的选项中：
context：需要跟之前保持一致，这个用来指导webpack匹配manifest.json中库的路径；
manifest：用来引入刚才输出的manifest.json文件。
方案调研
升级方案
此处省略掉中间无数试错、解决相关构建错误的心酸历程😔。。。
1、升级相应依赖包（更改package.json）
附：完整package.json文件
2、webpack.base.js修改
vue-loader 15引用配置
optimization配置
3、webpack.dev.conf.js修改
webpack4.0开始开发环境和生产环境通过mode参数区别，mode与module属性同级
4、webpack.pro.conf.js修改
添加生产环境环境变量控制参数
生成css文件的命名配置修改，否则编译报错
删除或者注释掉CommonsChunkPlugin相关插件，
删除Dll打包配置的相关插件add-asset-html-webpack-plugin及webpack.DllReferencePlugin
5、重新安装依赖包（确保已删除node_modules目录）
参考文档
主要参考：https://blog.csdn.net/harsima/article/details/80819747
https://www.jianshu.com/p/55404376b26e
https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B
Last updated
Was this helpful?