1. 首頁 > 生活百科 > >

【前端必會】走進webpack生命周期，另類的學習方法

生活百科

背景【【前端必會】走進webpack生命周期，另類的學習方法】webpack構建過程中的hooks都有什么呢？除了在網上看一些文章，還可以通過更直接的辦法，結合官方文檔快速讓你進入webpack的hook世界
寫一個入口文件
//index.jsconst 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.jsclass PrintHooksPlugin {constructor() {}//打印編譯器HooksprintCompilerHooks(compiler) {//打印編譯對象compiler.hooks.thisCompilation.tap("PrintHooksPlugin", (compilation) => {this.printCompilationHooks(compilation);});//遍歷compiler hooksObject.keys(compiler.hooks).forEach((hookName) => {compiler.hooks[hookName].tap("PrintHooksPlugin", (arg) => {console.log(`${hookName}`, hookName, arg);});});}//打印編譯（構建）HooksprintCompilationHooks(compilation) {let compilationHooks = compilation.hooks;//這里添加一個正則對象，判斷Hook結尾的let reg = /Hook$/;Object.keys(compilationHooks).forEach((hookName) => {//獲取hook函數名，判斷以Hook結尾，并且不是loglet 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');})();結果打印順序就說明了生命周期的過程

【前端必會】走進webpack生命周期，另類的學習方法

文章插圖
截圖不全，看一下后面的
【前端必會】走進webpack生命周期，另類的學習方法

文章插圖
總結
  1. 換一種方法學習webpack的生命周期，那個hook在文檔上看不太明白，直接斷點，看看處理前后數據結構的變化 。結合插件的源碼 。不信你不會
  2. 我們主要掌握方法，除了書本的知識 ， 還要結合實踐

    推薦閱讀