Webpack 4 升级总结

Webpack 是一个现代化的模块化打包工具，配合其他构建工具可以帮助我们完成复杂的前端项目的构建。Webpack 4 是 Webpack 的最新版本，引入了许多新特性和更新，提高了性能和稳定性。在这篇文章中，我们将探讨如何升级到 Webpack 4 以及一些升级过程中需要注意的事项。

升级步骤

以下是从 Webpack 3 升级到 Webpack 4 的步骤：

1. 首先，升级你的 Node.js 版本，Webpack 4 要求 Node.js 版本是 8.9 或以上；
2. 更新 Webpack 和与其相关的插件，可以通过 npm install 命令来安装最新的版本；
3. 确保你的 Webpack 配置文件是符合最新 Webpack 4 的标准的。具体地，你需要使用 mode 配置项来指定打包的模式，可以是 development 或者 production，此外还需要使用 optimization 配置来代替旧的 webpack.optimize.* 插件；
4. 检查你的 loaders 和 plugins 是否被最新的 Webpack 4 支持。如果没有被支持，需要升级或替换它们；
5. 最后，运行 Webpack 进行构建，并检查是否存在任何问题，以确保你已经成功升级到 Webpack 4。

注意事项

在升级 Webpack 4 过程中，需要注意以下几个问题：

1. 新的 mode 配置项

Webpack 4 引入了一个名为 mode 的新配置项，可以被用来代替在 Webpack 3 中使用的 --mode 命令行参数。mode 配置项可以接受的值有 development 和 production，它可以决定 Webpack 的一些内置优化策略的启用和禁用。

示例代码：

module.exports = {
  mode: 'production',
  // other configurations...
};

2. 新的 optimization 配置项

Webpack 4 不再使用 webpack.optimize.* 插件来优化构建，而是使用一个新的 optimization 配置对象。你可以使用这个对象来配置你需要启用的优化插件。

示例代码：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  },
  // other configurations...
};

3. 原有插件的兼容性

Webpack 4 是在现有插件基础上进行升级的，因此并不是所有插件都支持 Webpack 4 的新特性。在使用插件之前，需要检查它是否兼容 Webpack 4，如有必要需要进行版本升级或替换。

4. webpack-dev-server 的配置

Webpack 4 对 webpack-dev-server 的默认行为进行了改变。在 Webpack 3 中，当使用 webpack-dev-server 运行开发服务器时，会在文件写入磁盘之前打包和重新编译所有文件。这会导致开发服务器运行速度慢。在 Webpack 4 中，webpack-dev-server 默认只会在浏览器需要更新时重新编译文件。若需要使用旧的行为，需要在配置文件中添加 watchOptions。

示例代码：

-- -------------------- ---- -------
-------------- - -
  -- -------- --------------
  ---------- -
    ------------- -
      ----------------- ----
      ----- -----
    --
  --
--

结论

Webpack 4 是最新版本的 Webpack，带来了许多新特性和更新，可以提高构建速度和稳定性。在升级 Webpack 4 时，需要注意新的 mode 和 optimization 配置项的使用，查看插件的兼容性，并了解 webpack-dev-server 的行为变化，以便更好地升级和使用 Webpack 4。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67517d2e8bd460d3ad8a2452