有没有办法让 webpack 不显示它正在编译的所有块？

Posted 2023-03-08

【中文标题】有没有办法让 webpack 不显示它正在编译的所有块？

【英文标题】：Is there a way to make webpack not show all the chunks it's compiling?

【发布时间】：2016-06-26 09:14:55

【问题描述】：

默认的 webpack CLI 输出对我来说太冗长了。一旦我从我的一个文件中导入 React，输出就会爆炸，显示所有块 (?) 正在打包：

webpack result is served from /
content is served from /Users/me/myproject
Hash: aaaf5afc6582f3222f55
Version: webpack 1.12.14
Time: 1175ms
   Asset    Size  Chunks             Chunk Names
index.js  677 kB       0  [emitted]  main
chunk    0 index.js (main) 643 kB [rendered]
    [0] ./src/app.js 574 bytes 0 [built] [1 error]
    [1] ./~/react/react.js 56 bytes 0 [built]
    [2] ./~/react/lib/React.js 1.49 kB 0 [built]
    [3] ./~/react/lib/ReactDOM.js 3.71 kB 0 [built]
    [4] ./~/process/browser.js 2.06 kB 0 [built]

...

  [155] ./~/fbjs/lib/mapObject.js 1.47 kB 0 [built]
  [156] ./~/react/lib/onlyChild.js 1.21 kB 0 [built]
  [157] ./~/react/lib/deprecated.js 1.77 kB 0 [built]
  [158] ./~/react-dom/index.js 63 bytes 0 [built]
  [159] ./src/component.js 339 bytes 0 [built] [1 error]

我真的不在乎所有这些额外的信息。我很高兴有一种方法：

完全禁用块，只显示整体进度 只显示我自己的代码，而不是我从我的 node_modules 导入的东西

目前我的 webpack 命令是webpack-dev-server --progress。我的 webpack 配置非常基础，只为 babel 和 eslint 指定入口、输出和加载器。

【参考方案1】：

在命令行中，我无法找到执行此操作的方法。

但是，如果您有 webpack.config.js 文件，则有两个选项可用于隐藏模块列表..

devServer: 
    stats: 'errors-only'

或

devServer: 
    stats:  chunks: false 

希望对您有所帮助。

【讨论】：

不确定我是否做错了什么，但我无法让其中任何一个工作。它仍然总是打印大量的模块列表:(我也尝试在运行测试时将它添加到我的业力配置的 webpack 部分，但它在那里也不起作用。

不管它值多少钱——这些都对我有用。运行 webpack-dev-server 1.16.2

devServer: stats: chunks: false 为我工作。

唯一对我有用的地方是 'webpack.base.babel' 对于那些使用 react-boilerplate 的人。

【参考方案2】：

如果您的项目中有 webpack.config.js，请将以下内容添加到导出函数的返回对象中：

devServer: 
    stats: 
        assets: false,
        children: false,
        chunks: false,
        hash: false,
        modules: false,
        publicPath: false,
        timings: false,
        version: false,
        warnings: true,
        colors: 
            green: '\u001b[32m'
        
    

【讨论】：

允许将这些“stats:”选项添加到我的 webpack.config.js 中 module.exports 字典的根目录，并结合 --hide-modules CLI 参数（如@artnova 所建议）静音/调整 webpack 包输出的每个细节。

【参考方案3】：

这在我的情况下有效：

webpack --hide-modules

【讨论】：

广泛搜索 - 最佳答案

在 webpack 3 中不起作用（编辑：它确实起作用，只要你也没有传递 --color 标志）

【参考方案4】：

有 webpack 无证 option --hide-modules。 您可以通过将此行添加到webpack config 将其从webpack-dev-server 传递给webpack：

devServer:  'hide-modules': true 

【讨论】：

刚刚试了一下，好像没什么区别。我也试过--hide-modules=true。

我还为 webpack-dev-server 找到了 --quiet 选项。这摆脱了模块/块列表，但它也完全消除了我更改代码时发生打包的任何迹象。所以这可能是太很少信息。

hide-modules 是 webpack 选项，似乎它不是从 webpack-dev-server 传递的。

不，这似乎也不起作用:(从好的方面来说，我意识到它只在第一次运行时显示完整列表。如果我然后去修改一个文件并保存它，控制台只显示有关我刚刚修改的文件的信息。我可以忍受:)

【参考方案5】：

从 Webpack 3+ 开始，--display 标志允许对输出进行细粒度控制：

--display=(verbose|detailed|normal|minimal|errors-only|none)   

【参考方案6】：

在webpack.config.ts，可以试试

devServer : 
  stats: 'minimal',
  watchOptions:  
   poll: undefined,
   aggregateTimeout: 300,
   ignored: /node_modules/
 

希望有效。