webpack 3.1 升级webpack 4.0

为了提升打包速度以及跟上主流技术步伐，前段时间把项目的webpack 升级到4.0版本以上

webpack 官网：https://webpack.js.org/

正常操作升级webpack

检查node、npm 版本，该升级的升级
卸载webpack 旧版本，安装最新稳定版本 wepack、webpack cli
遇到loader 报错，升级各种loader，其中vue-loader 参考vue loader 官网说明
删除 ExtractTextPlugin插件，改用 MiniCssExtractPlugin
配置各个环境的mode
升级好之后继续优化，比如 gzip、happlyPack、dllplugin等等优化手段
等等

通常上面的报错很容易找到解决方案

碰到的问题

1、安装了babel 最新版，但是一直提示加载的是之前的版本，babel 一直报错

通常这是因为之前babel 卸载的不完整导致的，先把babel 相关的插件全都卸载，然后在安装新版本的插件。

2、在路由index中提示组件加载失败或者提示路由动态加载模块失败

dynamic-import-webpack

完整babel 配置如下

{

  "presets": ["@babel/preset-env"],

  // "presets": [

  //   ["env", {

  //     "modules": false,

  //     "useBuiltIns": "entry"

  //   }],

  //   "@babel/preset-env"

  // ],

  "plugins": [

    [

      "@babel/plugin-transform-runtime",

      {

        "absoluteRuntime": false,

        "corejs": false,

        "helpers": true,

        "regenerator": true,

        "useESModules": false

      }

    ],

    "@babel/plugin-syntax-dynamic-import",

    "@babel/plugin-proposal-object-rest-spread",

    "transform-vue-jsx",

    "dynamic-import-webpack",

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ],

  "env": {

    "test": {

      "presets": ["env", "stage-2"],

      "plugins": ["istanbul"]

    }

  }

}

3、Babel 7+使用babel-plugin-transform-vue-jsx报错的解决方法

"plugins": [

    "@babel/plugin-transform-runtime",

    "@babel/plugin-syntax-dynamic-import",

    "@babel/plugin-proposal-object-rest-spread",

    "transform-vue-jsx"

]

4、webpack 最好是看官网，webpakc 中文网并没有完全同步过来。

5、最新的babel 插件都是在@babel/ 名称空间下

效果

很多loader、插件都升级到了最新版，在未升级之前发一次测试环境要7分钟以上。升级之后发一次测试环境大概2分钟到3分钟左右。这次升级主要还是为了vue3.0，哈哈。希望赶紧来吧vue3.0。

巴特西

webpack 3.1 升级webpack 4.0

webpack 3.1 升级webpack 4.0

正常操作升级webpack

碰到的问题

1、安装了babel 最新版，但是一直提示加载的是之前的版本，babel 一直报错

2、在路由index中提示组件加载失败或者提示路由动态加载模块失败

3、Babel 7+使用babel-plugin-transform-vue-jsx报错的解决方法

4、webpack 最好是看官网，webpakc 中文网并没有完全同步过来。

5、最新的babel 插件都是在@babel/ 名称空间下

效果

最新文章

热门文章