记录一次webpack3升级webpack4

1.注意事项

---

• Node.js v4 –> Node.js v6

• CLI被分离成了一个单独的包，所以需要单独安装 webpack-cli

• 升级 plugins

• 新增了配置项：mode，配置开发环境or生产环境

• 移除的插件：

  module.exports = {
      // ...
      plugins: [
        -    new NoEmitOnErrorsPlugin(),
        -    new ModuleConcatenationPlugin(),
        -    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
        -    new UglifyJsPlugin()
        -    new NamedModulesPlugin()
        -    new NoErrorsPlugin(),
        -    new NewWatchingPlugin()
      ],
  }

• 关于 CommonsChunkPlugin:

  • CommonsChunkPlugin 已被移除，替换成了 optimization.splitChunks

可以根据npm的提示信息进行更新：

2.操作步骤

---

1. 安装 webpack-cli
2. 更新 webpack 的版本，v3.3.0 –> v4.41.2
3. 修改 loaders 配置，改为 use
4. 修复 exclude 配置

5. 启动脚本中加入 mode 参数

   此时报错 Error: Cannot find module 'webpack/bin/config-yargs'

6. 更新 webpack-dev-server 的版本，v2.5.1 –> v3.9.0

   此时 html-webpack-plugin 报错

7. 更新 html-webpack-plugin 的版本，v2.29.0 –> v3.2.0

   此时报错太多，不一一写了，看后面的操作步骤

8. 卸载 extract-text-webpack-plugin，安装 mini-css-extract-plugin
9. 修改 webpack 配置中包含 extract-text-webpack-plugin 的部分
10. 更新 babel-loader 的版本
11. 安装 @babel/core
12. 更新 karma-webpack 的版本
13. 卸载 babel-preset-2015，安装 @babel/preset-env

14. rules 配置中加入：

    {
        type: 'javascript/auto',
        test: /\.mjs$/,
        use: []
    }

15. 更新 html-webpack-plugin 的版本，v2.29.0 –> v3.0.7

16. wasm 的 loader 出了问题，google 了一下之后改了如下配置，将 wasm 的 loader 单独抽出来加入 type 属性：

    {
        test: /\.wasm$/,
        type: "javascript/auto",
        loader: "url-loader",
    },

    截止到此时，终端终于没有报错了。但是浏览器出现了最难解决的报错：
    
    Uncaught TypeError: Object prototype may only be an Object or null: undefined

注意：浏览器控制台有很多报错时，先解决第一个！上面的报错是由于 wasm 的 loader 错误导致的，但直接搜这条报错就会走到 ts 循环引用问题那条路上，无论跑多远都解决不了问题。

TODO: 不同分支 node_modules 版本不同时，每次执行 checkout 之后都需要重新 npm install，如何避免重复 install 而方便地进行切换？

3.更新的包

---

• [new] webpack-cli v3.3.10
• [new] @babel/core v7.7.2
• [new] @babel/preset-env v7.7.1
• [new] mini-css-extract-plugin v0.8.0
• [new] wasm-loader v1.3.0
• [remove] extract-text-webpack-plugin v3.0.2
• [remove] babel-core v6.26.0
• [update] karma-webpack v3.0.5 –> v4.0.2
• [update] tslint-eslint-rules v5.1.0 –> v5.4.0
• [upgrade] webpack v3.3.0 –> v4.41.2
• [upgrade] webpack-dev-server v2.5.1 –> v3.9.0
• [upgrade] karma-webpack v3.0.5 –> v4.0.2
• [upgrade] html-webpack-plugin v2.30.1 –> v3.2.0
• [upgrade] babel-loader v7.1.2 –> v8.0.6
• 插件 extract-text-webpack-plugin 替换成 mini-css-extract-plugin，修改了四个文件：
  • webpack.config.extend.js
  • webpack.config.lib.js
  • webpack.config.lite.js
  • webpack.config.prod.js
• webpack4 中 UglifyJsPlugin 被废除，需要安装新的插件 uglifyjs-webpack-plugin 进行替换

4.参考链接

---

https://webpack.js.org/migrate/4/

https://github.com/dwqs/blog/issues/60

Turf does not work with Webpack 4:

ERROR in ./node_modules/@turf/area/node_modules/@turf/meta/index.mjs 594:25-32

Can’t import the named export ‘feature’ from non EcmaScript module (only default export is available)

https://github.com/Turfjs/turf/issues/1383

about babel:

https://github.com/babel/babel/issues/6808

https://github.com/babel/babel/issues/8707

Can’t import the named export ‘feature’ from non EcmaScript module:

https://github.com/apollographql/react-apollo/issues/1737

https://juejin.im/post/5abb40596fb9a028c42e3efe

https://blog.csdn.net/songluyi/article/details/79419118