从 v3 迁移到 v4

本指南仅显示影响最终用户的主要更改。有关更多详细信息，请参阅 变更日志。

Node.js v4

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

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

CLI

CLI 已移至单独的包：webpack-cli。您需要在使用 webpack 之前安装它，请参阅 基本设置。

可以在 此处 找到安装指南。

更新插件

许多第三方插件需要更新到最新版本才能与 webpack 4 兼容。可以在 此处 找到流行插件的链接。

模式

将新的 mode 选项添加到您的配置中。根据您的配置类型，将其设置为 'production'、'development' 或 'none'。

webpack.config.js

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

已弃用/已删除的插件

这些插件可以从配置中删除，因为它们在生产模式下是默认的

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 的文档。默认配置可能已经满足您的需求。

import() 和 CommonJS

在使用 import() 加载非 ESM 时，webpack 4 中的结果已发生更改。现在您需要访问 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 和加载器

在使用自定义加载器转换 .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。