webpack 的 Loader 和 Plugin 简介

Loader

作用：webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集，比如jsx是没有办法加载的，
这就需要使用对应的loader对资源进行转换并将其加载进来。
定义：loader 是一个导出为函数的 JavaScript 模块
一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
webpack 采用的是 Compose（执行一系列的任务(函数)）：
compose=(f,g)=>(…args)=>f(g(…args));
运行环境：有独立的运行环境，可使用loader-runner进行调试和开发

Plugin

无loader那样的独立运行环境，只能在webpack中运行
作用：伴随整个webpack从初始化到资源生成的整个过程的，功能更为强大。

编写一个简单的webpack：
步骤：
1.使用npm init -y 生成的默认的package.json
2.在 package.json 中设置build命令:

  "scripts": {
    "build": "webpack"
  },

3.新建my-plugin文件：（apply方法是怎么调用的可见文章“webpack原理剖析”）

module.exports = class MyPlugin {
  constructor(options) {
    this.options = options;
  }
  
  apply(complier) {
    console.log('My plugin is executed!');
    console.log('My plugin options', this.options);
  }
}

4.新建webpack.config.js文件：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  mode: 'production',
  plugins: [
    new MyPlugin({
      name: "My----Plugin"
    })
  ]
}

5.执行npm run build

可见plugin中的方法被执行