如何将有效的 webpack 构建配置打印到控制台？

Question

我有一个复杂的 webpack 配置设置（合并多个配置文件的动态设置），我想看看 webpack 使用的最终配置是什么，即所有这些和默认配置的合并结果设置。

如何做到这一点？

Answer 1

这适用于我的 webpack 4.x:

let config = {
  // ...
  plugins: [
    // ...
    { // anonymous plugin
      apply(compiler) {
        compiler.hooks.beforeRun.tapAsync('MyCustomBeforeRunPlugin', function(compiler, callback) {
          // debugger
          console.dir(compiler.options)
          callback()
        })
      },
    }
  ]
}

当您取消注释 debugger 语句和运行使用 --inspect-brk 标志 (node --inspect-brk run-webpack.js) 的构建时，您也可以在 Chrome devtools 中看到它在 chrome://inspect/ 页面上（对于检查不可序列化到控制台的函数和对象实例很有用）。

Answer 2

对我有用的还有，我在导出语句之前创建了我想要的所有配置，然后导出了一个可以控制和 return 配置的函数

module.exports = () => {
  // I have two configs to export and wanted to see the rules
  // you may not see the nested objects then you have to console log them
  // directly

  console.log(config[0].module.rules);
  console.log(config[1].module.rules);
  return config;
};

Answer 3

最简单的方法是使用 webpack-config-dump-plugin

npm页面有安装使用说明

如何将有效的 webpack 构建配置打印到控制台？

How to print effective webpack build config to the console?

webpack

webpack-4