如何编写webpack的loader和plugin

1. webpack loader

loader官方解释是文件预处理器，通俗点说就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如: html文件需要使用html-loader, css文件需要使用css-loader、style-loader等等。

loader编写原则

单一原则: 每个loader只做一件事；
链式调用: Webpack会按顺序链式调用每个loader；
统一原则: 遵循Webpack制定的设计规则和结构，输入与输出均为字符串，各个loader完全独立，即插即用；

loader实例

webpack.config.js

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve('src/loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

src/loader.js

import { getOptions } from 'loader-utils';

export default function loader(source) {
  const options = getOptions(this);

  source = source.replace(/\[name\]/g, options.name);

  return `export default ${ JSON.stringify(source) }`;
}

test/example.txt

Hey [name]!

2. webpack plugin

plugin监听Webpack运行生命周期的所有事件，在合适的时机通过Webpack提供的API改变输出结果。大家熟知的BundleAnalyzerPlugin即是监听done事件后分析各个打包文件的大小。

plugin由以下组成：

一个 JavaScript 命名函数。
在插件函数的 prototype 上定义一个 apply 方法。
指定一个绑定到 webpack 自身的事件钩子。
处理 webpack 内部实例的特定数据。
功能完成后调用 webpack 提供的回调。

Compiler 和 Compilation

compiler对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
compilation对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

plugin实例

src/plugin.js

function HelloWorldPlugin(options) {
  // 使用 options 设置插件实例……
}

HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function(compilation/* 处理 webpack 内部实例的特定数据。*/, callback) {
    console.log('Hello World!');
    // 功能完成后调用 webpack 提供的回调。
    callback();
  });
};

module.exports = HelloWorldPlugin;