Webpack 中，loader 和 plugin 是两个核心概念，分别用于处理相关模块和扩展 Webpack 的功能

Loader

目的: 用于转换模块的源代码。

用法: 可以将各种类型的文件（如 JavaScript、CSS、图片等）转换为 Webpack 可以处理的有效模块。它们在模块加载时被应用，并允许你预处理文件。

配置: 在 Webpack 配置文件 (webpack.config.js) 中，Loaders 配置在 module.rules 字段下。

module.exports = {
 module: {
   rules: [
     {
       test: /\.css$/,  // 匹配文件类型
       use: ['style-loader', 'css-loader'],  // 使用的 loaders
     },
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env']
         }
       }
     }
   ],
 },
};

在上面代码示例中：

css-loader 处理 CSS 文件并将它们转换为 JavaScript 模块 style-loader 将这些 CSS 模块注入到 DOM 中

Plugin

目的: Plugin 用于执行范围更广的任务，并在 Webpack 的整个编译生命周期中进行操作。

用法: Plugins 提供了一种可以用于执行更复杂的任务（如打包优化、资源管理、注入环境变量等）的方式。它们可以影响到整个构建过程。

配置位置:Plugins 通常配置在 plugins 字段下

常用的Webpack Plugins

HtmlWebpackPlugin

作用：生成HTML文件，并自动注入打包后的资源（如JS、CSS）

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

CleanWebpackPlugin

作用：在每次构建前清理输出目录（如dist目录）。

npm install --save-dev clean-webpack-plugin

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

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

CleanWebpackPlugin

作用：创建在编译时可以配置的全局常量

const webpack = require('webpack');

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