背景

webpack構(gòu)建過程中的hooks都有什么呢？除了在網(wǎng)上看一些文章，還可以通過更直接的辦法，結(jié)合官方文檔快速讓你進(jìn)入webpack的hook世界

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、左云ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的左云網(wǎng)站制作公司

寫一個(gè)入口文件

//index.js
const webpack = require("webpack");
const path = require("path");
const PrintHooksPlugin = require("./PrintHooksPlugin");
const config = {
  context: path.resolve(__dirname),
  mode: "production",
  optimization: {
    minimize: false,
  },
  entry: "./main.js",
  target: ["web", "es5"],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [new PrintHooksPlugin()],
};

const compiler = webpack(config);
compiler.run((err, stats) => {
  debugger;
});

//看下打印插件

//PrintHooksPlugin.js
class PrintHooksPlugin {
  constructor() {}
  //打印編譯器Hooks
  printCompilerHooks(compiler) {
    //打印編譯對(duì)象
    compiler.hooks.thisCompilation.tap("PrintHooksPlugin", (compilation) => {
      this.printCompilationHooks(compilation);
    });

    //遍歷compiler hooks
    Object.keys(compiler.hooks).forEach((hookName) => {
      compiler.hooks[hookName].tap("PrintHooksPlugin", (arg) => {
        console.log(`${hookName}`, hookName, arg);
      });
    });
  }

  //打印編譯（構(gòu)建）Hooks
  printCompilationHooks(compilation) {
    let compilationHooks = compilation.hooks;

    //這里添加一個(gè)正則對(duì)象，判斷Hook結(jié)尾的
    let reg = /Hook$/;
    Object.keys(compilationHooks).forEach((hookName) => {
      //獲取hook函數(shù)名，判斷以Hook結(jié)尾，并且不是log
      let name = compilationHooks[hookName].constructor.name;
      if (reg.test(name) && hookName !== "log") {
        compilationHooks[hookName].tap("PrintHooksPlugin", (arg) => {
          console.log(`compilation ${hookName}`, arg);
        });
      }
    });
  }

  //插件入口
  apply(compiler) {
    console.log(compiler);
    console.log(compiler.hooks.thisCompilation);
    this.printCompilerHooks(compiler);
  }
}
module.exports = PrintHooksPlugin;

//main.js
!(function () {
  console.log('hello world');
})();

結(jié)果

打印順序就說明了生命周期的過程

截圖不全，看一下后面的

總結(jié)

1. 換一種方法學(xué)習(xí)webpack的生命周期，那個(gè)hook在文檔上看不太明白，直接斷點(diǎn)，看看處理前后數(shù)據(jù)結(jié)構(gòu)的變化。結(jié)合插件的源碼。不信你不會(huì)
2. 我們主要掌握方法，除了書本的知識(shí)，還要結(jié)合實(shí)踐

網(wǎng)頁(yè)題目：【前端必會(huì)】走進(jìn)webpack生命周期，另類的學(xué)習(xí)方法
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/dsojihs.html