如何打印有效的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://inspect/页面上的Chrome devtools（检查功能和对象不是序列化到控制台情况下有用）。

Answer 2

什么工作对我来说很好也就是我创造的一切我想要的CONFIGS出口语句之前，然后出口能安慰并返回CONFIGS功能

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