webpack-loader和webpack-plugin的区别

首先讲下什么是loader和plugin，再说下两者的一个区别

一、什么是loader？

loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等。最终打包到指定的文件中。

1. 处理一个文件可以用多个loader，loader执行顺序和配置中的执行顺序是相反的，最后一个loader先执行，第一个loader最后执行。
2. 第一个执行的loader接收源文件作为参数，其它loader接收前一个执行的loader的返回值作为参数，最后执行loader会返回此模块的JavaScript源码。

二、什么是plugin

在webpack运行的生命周期会广播许多的事件，plugin可以监听这些事件，在合适的时间通过webpack提供的api改变输出结果。

// plugin.js
class MyPlugin {
  constructor(options) {
    console.log("MyPlugin constuctor:",options)
  }
  apply(compiler) {
    compiler.plugin('compilation',compilation => {
      console.log("MyPlugin")
    })
  }
}
module.exports = MyPlugin

// webpack.config.js
const MyPugin = require('./plugin.js')
module.exprots = {
  ...
  plugins:[
    new MyPlugin({params:"my plugin options"})
  ]
}

使用plugin后，执行的顺序

1. webpack启动，会执行new MyPlugin(options)初始化的MyPlugin的实例
2. 在初始化compiler对象后，就会通过compiler.plugin监听到webpack的事件
3. 通过complier对象去操作webpack

三、两者的区别

• loader即为文件加载器，操作的是文件，将文件A装换文件B，是一个单纯的文件转换过程。
• plugin即为插件拓展器，针对是打包过程，它不直接操作文件，而是基于事件机制工作，会监听webpack打包过程的某些事件钩子，执行任务。通过plugin可以访问compliler和compilation的过程，通过钩子去拦截webpack的执行。

接下来回有webpack-loader的简单实现和webpack-plugin的实现讲解