如何在 treeshake 后获取 webpack 中捆绑包中的文件列表

Question

我正在尝试获取在 treeshaking 后最终出现在我的构建中的文件列表。 我使用条件编译常量从包中删除开发/调试代码，并且 Webpack 在 treeshaking 方面做得很好，我在生成的构建中找不到任何开发代码。 但是我想编写一些代码来检查一些开发文件是否错误地最终进入生产构建。

我已经尝试过NormalModuleReplacementPlugin但 Webpack 即使不使用它们仍然会加载导入，它必须分析所有源以确定它们是否是死代码。

我尝试添加插件来emit阶段挂钩并遍历所有模块并检查资源，但我仍然在那里找到对我的开发代码文件的引用，即使它们最终没有出现在生成的构建中。

class DevImportsMonitorPlugin {
    apply(compiler) {
        compiler.hooks.emit.tapAsync('DevImportsMonitor', (compilation, callback) => {
            compilation.chunks.forEach(chunk => {
                // explore chunk
                chunk.getModules().forEach(module => {
                    // explore modules
                })
            });
            callback();
        });
    }
}

我在那里放了一个断点并探索了块和模块的上下文，但它仍然引用了开发/测试模块。

也许有一种方法可以确定从 output 中删除了哪些模块？

Answer 1

我昨天刚试过，很酷； https://www.excitoninteractive.com/articles/read/65/webpack4/step-by-step-bundle-analyzer-plugin