webpack升级之旅（2->4）

前言

项目在17年启动，到如今2〇年了，webpack 都来到 4.43.0 了，而我的项目还停留在 webpack2.2 时代，是时候升级一下 webpack 了，但是升级的坑也就接踵而至了。

需要升级的包

• webpack(^2->^4)
• babel全家桶(babel-core、babel-preset-env、babel-transform-runtime...^7)，都升级为@babel/xxx，参照babel-upgrade
• babel-loader(^6->^8)
• babel-eslint(^7->^9)
• vux-loader^1->@vux/loader^2

配置修改

1、.babelrc

• presets: env 改成 @babel/preset-env
• presets: env 增加 "useBuiltIns": "usage" 按需引入，从而不需要手动引入 babel-polyfill 或 @babel/polyfill
• presets: env 增加 "corejs": 3 指定版本
• plugins: 删除["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]] 否则会报 .plugins[4][1] must be an object, false, or undefined，原因是babel^7不再支持plugin的第二个参数是数组的写法

2、webpack.base.conf.js

• vue-loader 移除 options: vueLoaderConfig
• 增加 VueLoaderPlugin
• 增加 new webpack.LoaderOptionsPlugin({ options: {} }) 来 兼容旧loader->this.options为undefined的问题

3、webpack.dev.conf.js

• entry 移除 ./build/dev-client & babel-polyfill
• alias: { 'vue': 'vue/dist/vue.runtime.min.js' } vue 使用 runtime 版本，减少打包体积
• 移除extract-text-webpack-plugin 换作 mini-css-extract-plugin
• css less等加上MiniCssExtractPlugin.loader
• 移除webpack.optimize.UglifyJsPlugin 换作 terser-webpack-plugin
• 增加optimization.splitChunks 以 提取公共模块