Open FrankKai opened 1 year ago
这个compilation的钩子可以处理静态产物。
compilation.hooks.processAssets.tap( { name: 'MyPlugin', stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, // 阶段 }, (assets) => { // 产物对象,key为asset路径,value为asset数据 } );
PROCESS_ASSETS_STAGE_SUMMARIZE:总结现有资产表阶段。
对于webpack4来说,等价hook可以使用compilation.hooks.optimizeAssets
compilation.hooks.optimizeAssets.tapAsync( pluginName, (assets, callback) => { // ... callback(); } );
看这个图就很明白了:
对于一份同逻辑的代码,当我们手写下一个一个的文件,它们无论是 ESM 还是 commonJS 或是 AMD,他们都是 module ; 当我们写的 module 源文件传到 webpack 进行打包时,webpack 会根据文件引用关系生成 chunk 文件,webpack 会对这个 chunk 文件进行一些操作; webpack 处理好 chunk 文件后,最后会输出 bundle 文件,这个 bundle 文件包含了经过加载和编译的最终源文件,所以它可以直接在浏览器中运行。
compilation.hooks.processAssets
这个compilation的钩子可以处理静态产物。
PROCESS_ASSETS_STAGE_SUMMARIZE:总结现有资产表阶段。
对于webpack4来说,等价hook可以使用compilation.hooks.optimizeAssets
compiler还有什么hooks
compilation还有什么hooks
webpack中的module,chunk,bundle有什么区别
对于一份同逻辑的代码,当我们手写下一个一个的文件,它们无论是 ESM 还是 commonJS 或是 AMD,他们都是 module ; 当我们写的 module 源文件传到 webpack 进行打包时,webpack 会根据文件引用关系生成 chunk 文件,webpack 会对这个 chunk 文件进行一些操作; webpack 处理好 chunk 文件后,最后会输出 bundle 文件,这个 bundle 文件包含了经过加载和编译的最终源文件,所以它可以直接在浏览器中运行。