减少webpack-dev-server的日志输出

Question

我有一个Webpack 4项目，使用webpack-dev-server时，构建完成后会输出很多日志信息，但这些信息并不是我所需要的。

i ｢wdm｣: Compiling...
‼ ｢wdm｣: Built at: 2018-4-15 09:15:18
Entrypoint main = styles.css bundle.js
[./node_modules/ansi-html/index.js] 4.16 KiB {main}
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main}
[./node_modules/react-dom/index.js] 1.33 KiB {main}
[./node_modules/react/index.js] 190 bytes {main}
[./node_modules/url/url.js] 22.8 KiB {main}
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main}
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js
3.58 KiB {main}
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main}
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main}
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main}
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main}
[./source/scripts/components/app.js] 2.11 KiB {main} [1 warning]
[./source/scripts/index.js] 454 bytes {main}
[./source/styles/main.scss] 39 bytes {main} [built]
   [0] multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js 40 bytes {main}
    + 36 hidden modules

WARNING in ./source/scripts/components/app.js

C:\...\source\scripts\components\app.js
  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function

✖ 1 problem (0 errors, 1 warning)

 @ ./source/scripts/index.js 11:11-38
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/postcss-loader/lib/index.js!source/styles/main.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js!./node_modules/normalize.css/normalize.css] ./node_modules/css-loader!./node_modules/normalize.css/normalize.css 6.42 KiB {mini-css-extract-plugin}
    [./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib/index.js!./source/styles/main.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib!./source/styles/main.scss 293 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {mini-css-extract-plugin}
i ｢wdm｣: Compiled with warnings.

有没有办法将其简化为只有重要的内容？输出类似于这样的结果是理想的。

i ｢wdm｣: Compiling...
‼ ｢wdm｣: Built at: 2018-4-15 09:15:18

WARNING in ./source/scripts/components/app.js

C:\...\source\scripts\components\app.js
  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function

✖ 1 problem (0 errors, 1 warning)

i ｢wdm｣: Compiled with warnings.

我的当前 webpack.config.js 文件如下：

module.exports ={
    // ...
    devServer: {
        compress: true,
        port: 8080,
        contentBase: BUILD_DIR,
        publicPath: BUILD_DIR,
        quiet: false,
        noInfo: false,
        stats: {
            assets: false,
            colors: true,
            version: false,
            hash: false,
            timings: false,
            chunks: false,
            chunkModules: false,
        }
    },
};

- Sam

Answer 1

我只需要多读一些文件资料……

我已经成功把输出结果减少到：

i ｢wdm｣: Compiling...
‼ ｢wdm｣: Built at: 2018-4-15 09:36:12

WARNING in ./source/scripts/components/app.js

C:\code\land-calculator\source\scripts\components\app.js
  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function

✖ 1 problem (0 errors, 1 warning)

 @ ./source/scripts/index.js 11:11-38
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js
i ｢wdm｣: Compiled with warnings.

为此，我更新了我的统计设置如下：

module.exports ={
    // ...
    devServer: {
        compress: true,
        port: 8080,
        contentBase: BUILD_DIR,
        publicPath: BUILD_DIR,
        quiet: false,
        noInfo: false,
        stats: {
            assets: false,
            children: false,
            chunks: false,
            chunkModules: false,
            colors: true,
            entrypoints: false,
            hash: false,
            modules: false,
            timings: false,
            version: false,
        }
    },
};

- Sam

Answer 2

对于Webpack 5，有些不同。您将直接在导出对象内使用统计信息，而不是在“devServer”属性内部使用它们。

module.exports = {
  ....
  stats: 'minimal' // 'minimal', 'errors-only', 'errors-warnings', 'none', 'normal', 'verbose', 'detailed', 'summary'
}

你可以查看文档以获取更多信息。

- Keenlabi