从 webpack 4 迁移

本指南仅展示影响最终用户的主要变更。更多细节请参阅更新日志。

Node.js v4

如果你仍在使用 Node.js v4 或更低版本，需要将 Node.js 安装升级到 Node.js v6 或更高版本。

Node.js 版本的升级说明可以在这里找到。

CLI

CLI 已移至独立的包：webpack-cli。在使用 webpack 之前，你需要先安装它，请参阅基础安装。

安装指南可以在这里找到。

更新插件

许多第三方插件需要更新到最新版本才能与 webpack 4 兼容。可以在这里找到热门插件的链接。

mode

在配置中添加新的 mode 选项。根据你的配置类型将其设置为 'production'、'development' 或 '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 的文档。默认配置可能已经满足你的需求。

提示： 从 stats 生成 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

module.loaders 自 webpack 2 起已废弃，现在已被移除，请使用 module.rules 代替。