Question

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

这怎么办？

Answer 1

这对我适用于webpack 4.x：

<body onload="myInit()">
<button id="clickMe" style="width: 500px; height: 500px">click me</button>
<pre id="debug"></pre>
</body>

取消注释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中看到它（对检查无法序列化到控制台的功能和对象实例。

Answer 2

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

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

Answer 3

对我来说也很奏效的是，我在export语句之前创建了我想要的所有配置，然后导出了一个可以控制台并返回配置的函数

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

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

3 个答案: