从 v3 迁移到 v4

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

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',
}

已弃用/已移除的插件

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

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

在 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 和 加载器

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