Webpack:从 v3 升级到 v4

2023-05-31 14:46 更新

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

Further Reading


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号