webpack升级之旅（2->4）

前言

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

须要升级的包

• 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

配置修改

一、.babelrcvue

• presets: env 改为 @babel/preset-envwebpack

• presets: env 增长 "useBuiltIns": "usage" 按需引入，从而不须要手动引入 babel-polyfill 或 @babel/polyfillgit

• presets: env 增长 "corejs": 3 指定版本github

• plugins: 删除["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]] 不然会报 .plugins[4][1] must be an object, false, or undefined，缘由是babel^7再也不支持plugin的第二个参数是数组的写法web

二、webpack.base.conf.jselement-ui

• 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 以 提取公共模块