面试题：Webpack CLI 脚手架自定义扩展的功能集成

Question

假设你要在Webpack CLI脚手架自定义扩展中集成一个代码压缩功能，在不使用现有插件的情况下，描述实现这一功能的思路，包括如何获取Webpack编译上下文、操作编译后的代码以及将压缩后的代码返回至正确流程。

Answer 1

1. 获取Webpack编译上下文：
   • 在Webpack自定义扩展中，可以通过Tapable钩子机制。Webpack的Compiler和Compilation对象都有很多钩子，我们可以利用这些钩子来获取编译上下文。例如，compilation钩子会在每个编译开始时触发，通过在这个钩子上挂载回调函数，我们就能获取到Compilation对象，它包含了本次编译的所有信息，如模块、资产等。

   const webpack = require('webpack');
   const { Compiler, Compilation } = webpack;
   class MyCodeCompressionPlugin {
     apply(compiler) {
       compiler.hooks.compilation.tap('MyCodeCompressionPlugin', (compilation) => {
         // 这里的compilation就是编译上下文
       });
     }
   }
   

2. 操作编译后的代码：
   • 从Compilation对象的assets属性中获取编译后的代码。assets是一个对象，键是输出文件的名称，值是包含文件内容等信息的对象。我们遍历这个assets对象，获取每个文件的内容。

   compiler.hooks.compilation.tap('MyCodeCompressionPlugin', (compilation) => {
     for (const assetName in compilation.assets) {
       if (compilation.assets.hasOwnProperty(assetName)) {
         const asset = compilation.assets[assetName];
         let sourceCode = asset.source();
         // 这里开始进行代码压缩操作，例如简单的去除空格
         sourceCode = sourceCode.replace(/\s+/g,'');
         // 更新压缩后的代码到asset中
         asset.source = () => sourceCode;
       }
     }
   });
   

3. 将压缩后的代码返回至正确流程：
   • 由于我们是在compilation钩子中操作Compilation对象的assets，Webpack后续的流程会按照正常的输出逻辑处理这些修改后的assets。当Webpack完成所有编译步骤后，会根据output配置将修改后的（压缩后的）代码输出到指定的目录，不需要额外的操作来将压缩后的代码返回至正确流程，Webpack自身的流程机制会确保这一点。

通过上述步骤，我们可以在不使用现有插件的情况下，在Webpack CLI脚手架自定义扩展中集成代码压缩功能。