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

配置修改

一、.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的第二個參數是數組的寫法

二、webpack.base.conf.js

• vue-loader 移除 options: vueLoaderConfig
• 增長 VueLoaderPlugin
• 增長 new webpack.LoaderOptionsPlugin({ options: {} }) 來 兼容舊loader->this.options爲undefined的問題

三、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 以 提取公共模塊