Webpack5 升级指南-JavaScript中文网-JavaScript教程资源分享门户

Webpack 5 正式版发布了，这是一项激动人心的进步。许多前端开发者都已经展开了升级工作，但是在这个过程中可能会遇到一些问题。本文将为你提供详细的指南，帮助你顺利升级到 Webpack 5，并探索其中的一些新特性。

Webpack 5 的新特性

Webpack 5 带来了许多新的特性和改进。

更快的构建速度

Webpack 5 在构建速度上有了一些显著改善。默认情况下，它会在打包时使用持久化缓存，这个缓存会减少构建的时候需要重新处理的模块数量。此外，Webpack 5 还为模块链接引入了新的算法，这也会提高构建速度。

更佳的 Tree Shaking

Webpack 5 对于 Tree Shaking 做了一些改进，这意味着你可以更轻松地删除不需要的代码。Webpack 5 会自动检测副作用代码并标记它们。

改进的持久化缓存

持久化缓存是 Webpack 5 中的一个新特性，它将缓存归档到磁盘上。这会使得重建缓存的速度更快，同时也会让缓存持久化到多个构建之间。

其它改进

Webpack 5 还带来了一些其它的改进，比如：

默认情况下使用 ES6 模块
针对 PWA 的增强
改进的 Error Handling

如果你想了解更多关于 Webpack 5 的改进和新特性，可以前往官方文档查看。

升级指南

接下来是 Webpack 5 升级指南。

安装 Webpack 5

首先，你需要安装 Webpack 5。你可以运行下面的命令进行安装：

npm install webpack --save-dev

升级依赖

如果你正在使用 Webpack 4 或更早的版本，那么你应该升级到最新版本的依赖。

在升级之前，你可以运行下面的命令来检查你当前的项目是否有任何不兼容的依赖：

npm ls --depth=0

下面是一些你可能需要升级的依赖：

@babel/core
babel-loader
css-loader
html-webpack-plugin
sass-loader

配置文件更新

Webpack 5 引入了一些重大更改，可能会导致你的配置文件无法正常工作。下面是一些你需要更新的主要更改：

Mode

你需要在你的配置文件中指定 mode 属性，这个属性可以是 development、production 或 none。

例如：

const config = {
  mode: 'production',
  // ...
};

webpack.config.js 文件名不可省略

你需要在你的项目根目录添加一个 webpack.config.js 文件。在 Webpack 5 中，webpack-cli 不再默认读取 webpack.config 文件夹下的配置文件。

Optimization 属性

Webpack 5 引入了一个新的 optimization 属性，它可以帮助你更好地优化应用程序。在 optimization 属性下，你可以指定各种插件和优化选项。

例如：

const config = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Resolving 引入的模块

在 Webpack 5 中，你可以省略在 import 中使用的扩展名。你可以通过 resolve.extensions 属性来配置这个设定。

例如：

const config = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

解决代码报错

如果你升级到 Webpack 5 后遇到了代码报错，那么检查代码是否符合最新的语法。Webpack5 默认使用 ES6 模块，你需要在你的代码中使用 import 而不是 require。

你还需要检查你的 css-loader 配置是否还需要使用 esModule 选项。

使用持久化缓存

Webpack 5 默认启用持久化缓存。这会将缓存保存在硬盘上，以便多次重建缓存。

如果你正在使用 Webpack 5 并想要启用持久化缓存，你可以在你的 webpack.config.js 文件中添加以下选项：

const config = {
  cache: {
    type: 'filesystem',
    // 其他选项...
  },
};

配置 Tree Shaking

Webpack 5 的 Tree Shaking 功能比以往更好用。为了使 Tree Shaking 正常工作，你需要将 optimization.usedExports 设置为 true。

例如：

const config = {
  optimization: {
    usedExports: true,
  },
};

使用 runtimeChunk

在 Webpack 5 中，你可以通过 optimization.runtimeChunk 来分离运行时代码。

例如：

const config = {
  optimization: {
    runtimeChunk: 'single',
  },
};

处理静态资源

如果你的项目中使用了静态资源，你需要为它们设置新的 Asset Modules。

例如：

// javascriptcn.com 代码示例
const config = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

使用 SourceMap 类型

如果你想要更好地调试你的代码，你需要使用 devtool 选项。Webpack 5 提供了一些新的 SourceMap 类型，包括 inline-source-map 和 nosources-source-map。

例如：

const config = {
  devtool: 'inline-source-map',
};

总结

Webpack 5 带来了一些伟大的特性和改进。在你开始更新你的项目之前，请确保你已经完全理解了这些更改以及如何通过上述指南升级。最重要的是，请不要过于担心，这些更改并不是特别困难，只要你遵循指南，你应该能够快速升级到 Webpack 5。

示例代码

// javascriptcn.com 代码示例
const config = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    usedExports: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  devtool: 'inline-source-map',
};

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654497457d4982a6ebe703b0