【Webpack5】一文带你了解 Webpack 基础配置优化，保姆级教学

Webpack 5 是一个非常强大的模块打包器，它可以帮助我们优化前端资源，提高应用程序的性能。为了实现这个目标，我们可以根据项目需求对 Webpack 配置进行优化。以下是一些建议的优化配置：

1. 使用 mode:

module.exports = {
  mode: 'production', // 设置为生产模式，启用内置的优化功能
};

设置 mode 为 'production' 可以让 Webpack 自动启用一些内置的优化功能，如代码压缩、Tree Shaking 等。

2. 使用 HtmlWebpackPlugin:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定模板文件
      minify: {
        collapseWhitespace: true, // 移除空白
        removeComments: true, // 移除注释
      },
    }),
  ],
};

HtmlWebpackPlugin 可以帮助我们自动生成 HTML 文件，并将打包后的资源自动插入到 HTML 中。通过配置 minify，我们可以对生成的 HTML 文件进行压缩。

3. 使用 MiniCssExtractPlugin:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 提取 CSS 到单独的文件
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css', // 使用 contenthash 避免缓存问题
    }),
  ],
};

MiniCssExtractPlugin 可以将 CSS 从 JavaScript 中提取出来，生成单独的 CSS 文件。这样做可以利用浏览器的缓存策略，提高性能。

4. 使用 TerserWebpackPlugin:

const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserWebpackPlugin({
        extractComments: false, // 移除注释
        terserOptions: {
          compress: {
            drop_console: true, // 移除 console 语句
          },
        },
      }),
    ],
  },
};

TerserWebpackPlugin 是一个用于压缩 JavaScript 的插件。我们可以通过配置 terserOptions 来实现更多的优化效果，如移除 console 语句等。

5. 使用 SplitChunksPlugin:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 将公共代码提取到单独的文件中
    },
  },
};

SplitChunksPlugin 可以将公共代码提取到单独的文件中，避免重复加载，提高性能。

6. 使用缓存:

module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
  },
};

启用缓存可以加快构建速度，特别是在开发环境下。

这些配置只是针对一般情况下的优化建议，实际根据项目的具体需求，还可以进行更多的优化。希望对你有所帮助！下一篇文章简单说说Webpack5的打包优化配置，提升项目构建速度,感兴趣的小伙伴点赞加收藏不迷路...。