webpack 运行原理

插件机制基于tabpable，webpack定了各种plugin，注册的事件和触发时机是webpack定义好并暴露给用户的。

webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。

tabpable 运行机制：github.com/zgfang1993/…

webpack插件写法：http://182.92.11.63/webpack/plugin.html#%E8%8E%B7%E5%8F%96-compliation-%E5%AF%B9%E8%B1%A1

class DonePlugin {
    constructor(options = {}) {
        // 接收插件的参数
        console.log("插件被实例化了")
        this.options = options
    }
    // 插件必须提供一个 apply 函数， 函数接收的参数是 complier 对象
    apply(complier) {
        // 监听 `done` 钩子函数
        complier.hooks.done.tap('Done', () => {
            console.log(this.options.message || "webpack 触发了 done hook")
        })
    }
}
module.exports = DonePlugin

webpack loader 写法：

const babel = require("@babel/core");
const loaderUtils = require("loader-utils");
const path = require("path");
module.exports = function (inputSource) {
  // 获取webpack.config.js 里 babel-laoder的 options 的参数。
  const options = loaderUtils.getOptions(this);
  // 默认 options 选项
  const defaultOPtions = {
    // 生成 sourceMap
    sourceMaps: true,
    // 与当前正在编译的代码关联的文件名
    filename: path.basename(this.resourcePath),
  };
  // 使用 babel 生成 code，sourceMap，ast
  const { code, sourceMap, ast } = babel.transform(
    inputSource,
    Object.assign(defaultOPtions, options)
  );
  // 把 babel 生成的 sourceMap，ast 传递给 webpack，
  // 这样 webpack 就不需要在从新生成, 从而提高编译效率。
  this.callback(null, code, sourceMap, ast);
};

fullhash, chunkhash, contenthash 的区别：

fullhash 在项目中任意一处改变都会让所有hash值改变 chunkhash 只影响改变内容的文件，和它被依赖文件的hash contenthash 只影响被改变的文件自己

fullhash 可以用在dev环境，chunkhash用在js文件，contenthash用在css文件。