How Webpack works

The plug-in mechanism is based on Tabpable, with WebPack defining various plugins and registering events and trigger times that webPack defines and exposes to the user.

The core Compiler in Webpack, and the Compilation that creates bundles, are instances of Tapable.

Tabpable running mechanism: github.com/zgfang1993/…

Webpack plug-in writing: 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 = {}) {
        // Accept the parameters of the plug-in
        console.log("The plug-in is instantiated")
        this.options = options
    }
    // The plugin must provide an apply function that takes a complier object
    apply(complier) {
        // Listen on the 'done' hook function
        complier.hooks.done.tap('Done'.() = > {
            console.log(this.options.message || "Webpack triggered done hook")}}}module.exports = DonePlugin
Copy the code

Webpack loader

const babel = require("@babel/core");
const loaderUtils = require("loader-utils");
const path = require("path");
module.exports = function (inputSource) {
  // Get the parameters of babel-laoder options in webpack.config.js.
  const options = loaderUtils.getOptions(this);
  // Default options
  const defaultOPtions = {
    / / generated sourceMap
    sourceMaps: true.// The file name associated with the code currently being compiled
    filename: path.basename(this.resourcePath),
  };
  // Generate code, sourceMap, ast using Babel
  const { code, sourceMap, ast } = babel.transform(
    inputSource,
    Object.assign(defaultOPtions, options)
  );
  // Pass the sourceMap, AST generated by Babel to webpack,
  // WebPack does not need to be regenerated, thus improving compilation efficiency.
  this.callback(null, code, sourceMap, ast);
};
Copy the code

Fullhash, chunkhash, contenthash

Fullhash changes at any point in the project cause all hash values to change. Chunkhash only affects the changed file, and the hash contenthash of the file it depends on only affects the changed file itself

Fullhash can be used in dev environments, chunkhash in JS files, and contenthash in CSS files.