vue项目 webpack4升级实践 #40
Description
vue项目 webpack4升级实践
最近将vue项目的打包工具webpack升级到了V4，原有配置是基于Vue-CLI 2生成的，其中部分过程做了微调。方便起见，就直接在原有基础上通过安装新依赖，调整配置，最后也顺利完成了升级。
webpack4 新特性
据官方发布消息称，webpack4有以下几个特点：
1. webpack 4 速度提升98%
其实，实测下来，提示性能普遍在50% ~ 60%之间，如果项目本身就比较小，速度提升则更不明显。Anyway，有提升就好。
2. 引入mode，包含默认配置
mode有两个值 development和production 即开发模式和生产模式 当你设置不同的mode时，会默认开启以下特性：
development
- 浏览器调试工具
- 注释、开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
production
- 开启所有的代码优化过程
- 更小的bundle大小
- 去除掉只在开发阶段运行的代码
- Scope hoisting和Tree-shaking
3. 插件变化：移除CommonsChunkPlugin等，使用新的配置项optimization代替
webpack新增optimization选项，主要用于构建过程中的代码优化，常用配置如下所示：
// webpack4 新增优化选项 提供minify splitChunks等功能
optimization: {
minimize: true, // 默认开启压缩
minimizer: [
// ES 压缩
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
warnings: false,
compress: {
drop_console: true
}
}
}),
// CSS 压缩 去重
// Compress extracted CSS. We are using this plugin so that possible duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
})
],
// 提取webpack运行时的代码
runtimeChunk: {
name: 'manifest'
},
// 提取公共模块，防止模块重复打包 代替CommonsChunkPlugin
splitChunks: {
chunks: 'async',
minSize: 30000, // 形成一个新代码块最小的体积
minChunks: 1,
maxAsyncRequests: 5, // 按需加载时候最大的并行请求数
maxInitialRequests: 3, // 一个入口最大的并行请求数
automaticNameDelimiter: '~', // 打包分割符
name: true,
cacheGroups: {
// 拆分样式
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
priority: 1000
},
// 单独拆分vue框架
vueFramework: {
name: 'vueFramework',
test: (module) => {
return /vue|vue-router|vuex/.test(module.context);
},
chunks: 'initial',
priority: 200,
},
// 拆分其他vendor
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial',
priority: 100
}
}
}
}4. 增加webAssembly支持
5. 支持多种模块类型
- javascript/auto: 在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
- javascript/esm: 只支持ESM这种静态模块。
- javascript/dynamic: 只支持CommonJS和AMD这种动态模块。
- json: 只支持JSON数据，可以通过require和import来使用。
- webassembly/experimental: 只支持wasm模块，目前处于试验阶段。
6. 推崇0配置
webpack受parcel rollup等打包工具启发，从v4版本不再强制需要webpack.config.js，以做到开箱即用。通过命令行 webpack --mode development 即可对小型项目打包
如何升级
- 更新node版本 >=8.9.4 (recommend version)
- 安装最新的 webpack4 webpack-dev-server webpack-cli（命令行工具）
- 将webpack loader、plugin升级至最新版本，包括但不限于html-webpack-plugin、 friendly-errors-webpack-plugin、terser-webpack-plugin、file-loader、url-loader等。其中extract-text-webpack-plugin直接删掉，因为不兼容webpack4，替换为mini-css-extract-plugin，即新的css抽离插件。还需引入vue-loader插件
- 去掉这些插件：NoEmitOnErrorsPlugin、ModuleConcatenationPlugin、NamedModulesPlugin、CommonsChunkPlugin，因为这些都将升级为optimization配置项，而不是以插件形式继续存在。分别变成 optimization.noEmitOnErrors、optimization.concatenateModules、optimization.namedModules和optimization.splitChunks
plugins: [
// 引入vue-loader插件
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
})
]- 引入mode模式之后，会自动设置process.env.NODE_ENV，所以需要去除多余的环境变量设置
- 升级后试运行，运行过程中如遇插件或loader报错，则将其升级至最新版本，如仍有问题再进一步解决。
Vue CLI 3.0 +
如果嫌手动配置webpack4麻烦，（毕竟不是人人都是webpack配置工程师。。。） 那可以直接采用vue cli3重新搭建一套脚手架。
- 通过 @vue/cli 搭建交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
- 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack4 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装运行
npm install -g @vue/cli
或者
yarn global add @vue/cli
vue ui
然后，一切都是你熟悉的图形化配置了，vuex? vue-router? babel? eslint? typescript? unit test?等等，统统一键加入你的项目中，相当方便。