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

Question

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

如何实现呢？

- jakub.g

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 开发工具中的 chrome://inspect/ 页面中看到它（有助于检查无法序列化到控制台的函数和对象实例）。

- jakub.g

Answer 2

我发现一个方法很有效，就是在导出语句之前创建所有我想要的配置，然后导出一个函数，该函数可以在控制台中输出并返回这些配置。

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;
};

- Ali Ghali

---

这是唯一对我有效的解决方案，不确定为什么它被投票否决了。在webpack配置中没有魔法需要插入webpack来转储它。而且在webpack 4中，@jakub.g的答案中的代码根本不起作用。 - boatcoder

这对我很有效！这是一个聪明的解决方案！非常感谢！ - 尤川豪

Answer 3

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

npm 页面上有安装和使用说明。

- boatcoder