Webpack 中 Loader 和 Plugin 有什么区别？

• 核心定义：根据Loader本质是文件加载器，专注于对资源文件进行转换和处理，如将Sass编译成CSS。Plugin则用于扩展Webpack核心功能，如提供打包优化、资源管理和事件监听的灵活性。
• 核心区别一：作用与职责
  1. Loader作用于文件级别，用于加载和转换文件内容（例如，通过JavaScript加载SCSS文件转换为CSS）。
  2. Plugin作用于整个构建生命周期，可修改输出结果或加入新功能（例如，通过HtmlWebpackPlugin生成HTML文件并自动注入资源引用）。
• 核心区别二：运行时机
  1. Loader只运行在打包文件加载前，对模块逐个处理。
  2. Plugin在整个编译周期监听Webpack广播的事件（如编译完成事件），并在任意阶段触发自定义逻辑。
• 核心区别三：配置方式
  1. Loader在Webpack配置文件webpack.config.js中的module.rules数组内定义规则，指定文件和对应的loader模块。

     module.exports = {
       module: {
      rules: [
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'] // 多个loader处理SCSS文件
        }
      ]
       }
     };
     

  2. Plugin在plugins数组中直接实例化对象，参数通过构造函数传入。

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     module.exports = {
       plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
       ]
     };
     

• 适用场景差异
  • 只有Loader实现不了的复杂功能（如环境变量注入或文件复制），可用Plugin来解决。例如，CopyWebpackPlugin用于静态文件复制，非Loader专属领域。
• 总结：Loader侧重文件级的加载与编译转换，Plugin侧重全局级的扩展与自定义流程，两者协同使Webpack成为强大工具库。