Webpack Loader 与 Plugin 区别

问题

Webpack 中 Loader 与 Plugin 有什么区别？常用的 Loader 和 Plugin 有哪些？

解答

Loader 是什么

Loader 是文件转换器，将非 JavaScript 文件转换为 Webpack 能处理的模块。Webpack 本身只能处理 JavaScript 和 JSON，其他类型文件需要 Loader 转换。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // babel-loader: 将 ES6+ 转换为 ES5
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // css-loader + style-loader: 处理 CSS 文件
      {
        test: /\.css$/,
        // 执行顺序：从右到左，先 css-loader 再 style-loader
        use: ['style-loader', 'css-loader']
      },
      // 处理图片资源
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset/resource'
      }
    ]
  }
};

Plugin 是什么

Plugin 是扩展器，用于执行更广泛的任务：打包优化、资源管理、注入环境变量等。Plugin 可以监听 Webpack 构建生命周期中的事件，在特定时机执行操作。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    // 清理 dist 目录
    new CleanWebpackPlugin(),
    
    // 自动生成 HTML 并注入打包后的资源
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true // 压缩 HTML
      }
    }),
    
    // 将 CSS 提取为单独文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    })
  ]
};

完整配置示例

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        // 生产环境用 MiniCssExtractPlugin.loader 提取 CSS
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: 'css/[name].css' })
  ]
};

常用 Loader

Loader	作用
babel-loader	ES6+ 转 ES5
css-loader	解析 CSS 文件中的 @import 和 url()
style-loader	将 CSS 注入到 DOM
sass-loader	编译 Sass/Scss
file-loader	处理文件资源
url-loader	小文件转 base64
ts-loader	编译 TypeScript

常用 Plugin

Plugin	作用
HtmlWebpackPlugin	生成 HTML 文件
MiniCssExtractPlugin	提取 CSS 为单独文件
CleanWebpackPlugin	清理构建目录
DefinePlugin	定义环境变量
CopyWebpackPlugin	复制静态资源
TerserPlugin	压缩 JavaScript

关键点

• Loader 是转换器：处理非 JS 文件，在 module.rules 中配置，执行顺序从右到左
• Plugin 是扩展器：扩展 Webpack 功能，在 plugins 数组中实例化使用
• 运行时机不同：Loader 在模块加载时执行，Plugin 在整个构建生命周期中执行
• 配置方式不同：Loader 在 module.rules 中配置，Plugin 需要 new 实例化后放入 plugins 数组
• 职责边界：文件转换用 Loader，其他任务（优化、注入、清理等）用 Plugin