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

3 位贡献者

sokraEugeneHlushko