To v4 from v3

这篇指南仅仅展示了影响用户使用的主要改变。更多细节查看 更新日志(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。