常用的webpack plugin详细的配置和使用差别

1. HtmlWebpackPlugin

用途：自动生成 HTML 文件，并自动注入打包后的资源（JS/CSS）。
配置示例：

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定 HTML 模板
      filename: 'index.html',       // 输出文件名
      inject: 'body',               // 资源注入位置（head/body）
      minify: {                     // 生产环境压缩 HTML
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ]
};

使用差异：

• 默认生成一个空 HTML 文件，若需自定义结构需指定 template。
• inject: true 会将资源自动注入到 </body> 前。
• 多页面应用需多次实例化该插件，并配置不同的 filename 和 chunks。

---

2. CleanWebpackPlugin

用途：在构建前清空输出目录，避免旧文件残留。
配置示例：

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

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      dry: false,          // 模拟删除（dry 为 true 时仅打印日志）
      cleanOnceBeforeBuildPatterns: ['**/*'], // 默认清空所有文件
    })
  ]
};

使用差异：

• 旧版本中需指定 output.path，新版本默认清空 Webpack 的 output.path。
• 可通过 cleanStaleWebpackAssets: false 保留未被当前构建引用的旧文件。

---

3. MiniCssExtractPlugin

用途：将 CSS 提取为独立文件（替代 style-loader）。
配置示例：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 替换 style-loader
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css', // 输出文件名格式
      chunkFilename: 'css/[id].[contenthash:8].css' // 非入口 CSS 文件命名
    })
  ]
};

使用差异：

• 开发环境：可能仍使用 style-loader 以获得 HMR 支持。
• 生产环境：通过此插件拆分 CSS 文件，结合 optimization.splitChunks 进一步优化。

---

4. DefinePlugin

用途：定义全局常量，用于环境变量注入。
配置示例：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'API_BASE_URL': JSON.stringify('https://api.example.com')
    })
  ]
};

使用差异：

• 值需通过 JSON.stringify() 处理，避免变量替换错误。
• 常用于区分开发/生产环境（如接口地址、功能开关）。

---

5. CopyWebpackPlugin

用途：复制静态文件（如图片、字体）到输出目录。
配置示例：

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

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public/assets', to: 'assets' }, // 复制整个目录
        { from: 'public/robots.txt', to: 'robots.txt' } // 复制单个文件
      ]
    })
  ]
};

使用差异：

• 替代手动复制或通过 Loader 处理静态资源。
• 适用于无需编译的第三方库（如已压缩的 JS/CSS）。

---

6. HotModuleReplacementPlugin (HMR)

用途：启用模块热替换（无需刷新页面更新代码）。
配置示例：

const webpack = require('webpack');

module.exports = {
  devServer: {
    hot: true, // 需开启 devServer.hot
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

使用差异：

• 仅用于开发环境，生产环境需移除。
• 需配合 devServer.hot: true 和模块的 HMR 处理逻辑（如 React 的 react-hot-loader）。

---

7. SplitChunksPlugin

用途：拆分公共代码和第三方依赖（Webpack 4+ 默认集成）。
配置示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        },
        common: {
          minChunks: 2,
          name: 'common',
          priority: 5
        }
      }
    }
  }
};

使用差异：

• chunks: 'all' 表示同时处理同步和异步代码。
• cacheGroups 可自定义拆分策略（如分离 node_modules 和公共业务代码）。

---

8. ESLintWebpackPlugin

用途：集成 ESLint 进行代码规范检查。
配置示例：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  plugins: [
    new ESLintPlugin({
      extensions: ['js', 'jsx'], // 检查的文件类型
      fix: true,                // 自动修复部分问题
      emitWarning: true         // 警告而非阻塞构建
    })
  ]
};

使用差异：

• 替代 eslint-loader（官方推荐使用此插件）。
• 通过 fix: true 自动修复可修复的问题（如缩进、引号格式）。

---

总结：配置与使用差异

插件	核心场景	关键配置项	环境
HtmlWebpackPlugin	生成 HTML 并注入资源	template, filename, inject	通用
CleanWebpackPlugin	清理构建目录	dry, cleanOnceBeforeBuildPatterns	生产/预发布
MiniCssExtractPlugin	提取 CSS 为独立文件	filename, chunkFilename	生产
DefinePlugin	注入环境变量	全局常量定义	通用
CopyWebpackPlugin	复制静态资源	patterns（from/to）	生产/开发
HMR	开发时热更新	需配合 devServer.hot	开发
SplitChunksPlugin	代码拆分优化	cacheGroups, chunks	生产
ESLintWebpackPlugin	代码规范检查	extensions, fix, emitWarning	开发

注意事项：

• 生产环境插件（如 MiniCssExtractPlugin）需通过 process.env.NODE_ENV 判断是否启用。
• 部分插件（如 SplitChunksPlugin）属于 Webpack 内置功能，无需额外安装。
• 插件执行顺序可能影响结果（如 CleanWebpackPlugin 通常放在最前）。