webpack Plugin 和 Loader 的区别

webpack是一个模块打包器（module bundler），利用webpack打包可以使开发便捷，拓展性强，可以使用户任意选择自己喜欢的模块进行开发，可以解决模块之间的相互依赖关系，插件机制完善。webpack提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。

1.Loader：

用于对模块源码的转换，loader 描述了 webpack 如何处理非 javascript 模块，并且在 buld 中引入这些依赖。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或者将内联图像转换为 data URL。比如说：CSS-Loader，Style-Loader 等。

• 常见的loader配置：

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
       {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        { test: /\.js$/, use: 'babel-loader' },
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            { loader: 'postcss-loader' },
          ]
        }
      ]
    }
  };
  

2.plugin

目的在于解决 loader 无法实现的其他事,它直接作用于 webpack，扩展了它的功能。在 webpack 运行的生命周期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。如：extract-text-webpack-plugin将 css 提取成独立的 css 文件；html-webpack-plugin 创建 HTML 页面文件到你的输出目录，另外将 webpack 打包后的 chunk 自动引入到这个 HTML 中；DefinePlugin 定义全局常量

// 一个 JavaScript 命名函数。
function MyExampleWebpackPlugin() {
};
// 在插件函数的 prototype 上定义一个 apply 方法。
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
// 指定一个挂载到 webpack 自身的事件钩子。
compiler.plugin('webpacksEventHook', function(compilation /* 处理 webpack 内部实例的特定数据。*/, callback) {
console.log("This is an example plugin!!!");
// 功能完成后调用 webpack 提供的回调。
callback();

});
};
复制代码