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提取公共模块
原文链接:juejin.im

上一篇:JS-执行环境(Execution Context)和作用域(Scope)
下一篇:Weex uniapp中纯nvue项目全局弹窗优雅的解决方案

相关推荐

官方社区

扫码加入 JavaScript 社区