Webpack：从 v3 升级到 v4

这篇指南仅仅展示了影响用户使用的主要改变。更多细节查看 更新日志(the changelog)。

Node.js v4

如果你正在使用 Node.js 的 V4 或 V4 以下版本，需要更新你的 Node.js 至 V6 或者更高版本

更新 Node.js 版本的说明见 这里。

脚手架（CLI）

脚手架 (CLI) 已经放至一个单独的 webpack-cli 中。在你使用 webpack 之前需要安装它，参见基础步骤.

安装指南见这里。

更新插件

为了兼容 webpack4，许多第三方插件需要更新至最新版本。

模式（mode）

在你的配置中添加新的 ​模式 （mode）​ 选项。设置它为 ​'production'​, ​'development'​ or ​'无 (none)'​

webpack.config.js

module.exports = {
  // ...
+  mode: 'production',
}

注：​'development'​ 模式和 ​'production'​ 模式的用途不同。你可以使用 操作指南 中的 ​webpack-merge​ 来优化配置。

不推荐或被移除的插件

生产模式中已经默认集成了部分插件，这部分默认插件可以在配置中被移除：

webpack.config.js

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

在开发模式中，这些插件已默认安装

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}

这些插件不推荐并且现在已经删除

webpack.config.js

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}

CommonsChunkPlugin

​CommonsChunkPlugin​ 已被移除。可以使用 ​optimization.splitChunks​ 来代替。

查阅 optimization.splitChunks 文档了解更多相关细节。其默认配置可能已经满足你的需求。

注：当计算生成 HTML 时，你可以使用 ​optimization.splitChunks.chunks: "all"​， 该优化配置在较多项目中被使用。

import() 和 CommonJS

在 webpack 4 中，当使用 ​import()​ 去加载非标准 ESM 时，其值已经被加载. 现在你需要通过 ​default​ 属性来得到 ​module.exports​ 中的取值。

non-esm.js

module.exports = {
  sayHello: () => {
    console.log('hello world');
  },
};

example.js

function sayHello() {
  import('./non-esm.js').then((module) => {
    module.default.sayHello();
  });
}

json 和 loaders

当使用自定义 loader 去转化 ​.json​ 文件时，你需要更改模块中的 ​type​:

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    }
  ]
};

仍在使用的​ json-loader​ 可从项目中移除。

webpack.config.js

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};

module.loaders

自 webpack 2 后 ​module.loaders​ 不推荐使用，目前其已被移除，并推荐使用 module.rules。

Further Reading

• To v2 or v3 from v1
• RIP CommonChunkPlugin
• webpack 4: migration guide for plugins/loaders