webpack loader/plugin

Webpack Plugin 和 Loader 的区别与作用：

一、Loader（加载器）

作用：

• 资源转换：Loader 主要用于将非 JavaScript 模块（如图片、CSS、TypeScript）转换为 Webpack 能处理的模块。
• 单文件处理：按照链式顺序从后到前执行，每个 Loader 负责特定的转换。
• 配置方式： 在 module.rules 中定义，通过 test 匹配文件，use 指定使用的 Loader。

示例场景：

• css-loader 解析 CSS 中的 @import 和 url()，style-loader 将 CSS 插入到 DOM。

---

二、Plugin（插件）

作用：

• 扩展功能：插件能够监听 Webpack 生命周期钩子，执行打包优化、资源管理、环境注入等任务。
• 全局操作：插件在构建流程中介入，影响整个打包过程。
• 配置方式： 在 plugins 数组中实例化，可传递配置选项。

示例场景：

• HtmlWebpackPlugin 自动生成 HTML 并注入打包后的 JS 资源。
• CleanWebpackPlugin 在构建前清理旧的输出目录。

---

三、核心区别

特性	Loader	Plugin
作用对象	单个文件	整个构建流程
执行时机	模块加载阶段	任意构建阶段（钩子）
功能	文件转译	扩展优化构建过程
配置方式	module.rules	plugins 数组

---

四、手动实现一个 Loader

需求：将 JS 中的 "world" 替换为自定义字符串（如 "loader"）。

代码：replace-loader.js

module.exports = function(source) {
  // 替换所有出现的 'world' 为 'loader'
  return source.replace(/world/g, 'loader');
};

Webpack 配置（webpack.config.js）

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('path/to/replace-loader.js'),
            options: { /* 可选参数 */ }
          }
        ]
      }
    ]
  }
};

---

五、手动实现一个 Plugin

需求：在打包完成后，生成一个包含构建信息的 note.txt。

代码：FileListPlugin.js

class FileListPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('FileListPlugin', (stats) => {
      const fs = require('fs');
      const content = `构建时间：${new Date(stats.startTime).toLocaleString()}\n输出文件：${stats.compilation.assets['main.js']._name}`;
      fs.writeFileSync(path.join(stats.compilation.outputOptions.path, 'note.txt'), content);
    });
  }
}

module.exports = FileListPlugin;

Webpack 配置（webpack.config.js）

const FileListPlugin = require('./FileListPlugin');

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

---

六、验证与调试

1. Loader 测试：编写一个 JS 文件，检查 "world" 是否被正确替换。
2. Plugin 测试：构建完成后，查看输出目录是否生成 note.txt 并包含正确信息。

注意事项：

• Loader 需保持无状态，避免副作用。
• Plugin 应通过官方文档选择合适的生命周期钩子（如 compiler.hooks.emit 用于生成文件前的处理）。

---

通过上述实现，可以清晰理解 Loader 和 Plugin 的工作机制及差异，实际开发中可根据需求灵活扩展功能。