在项目打包中，会对代码进行压缩，或者转码，今天，整理一下常用的配置

一：HtmlWebpackPlugin：用于生成html文件，并自动引入打包生成的js,css文件

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

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // HTML 模板文件
      filename: 'index.html', // 输出的 HTML 文件名
    }),
  ],
};

二：MiniCssExtractPlugin：将css提取为单独的文件，通过link标签引入

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

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // 提取的 CSS 文件名
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
};

三：CleanWebpackPlugin：打包前清空输出目录

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

四：CopyWebpackPlugin：将指定的文件或者目录复制到输出目录

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' }, // 复制 assets 目录到输出目录
      ],
    }),
  ],
};

五：DefinePlugin：定义全局常量，

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'), // 定义环境变量
    }),
  ],
};

6：UglifyJsPlugin：压缩js代码

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

module.exports = {
  // ...其他配置
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        // 压缩选项
        uglifyOptions: {
          compress: {
            // ...其他压缩配置
          },
        },
      }),
    ],
  },
};

七：OptimizeCSSAssetsPlugin：压缩css代码

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...其他配置
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin(),
    ],
  },
};

八：ProvidePlugin：自动加载模块，不需要手动引入

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

9：BundleAnalyzerPlugin：可视化分析打包结果

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // ...其他配置
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

10：HotModuleReplacementPlugin：热模块替换，无需刷新页面进行模块更新

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  devServer: {
    hot: true, // 启用热模块替换
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};