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

Question

我有一个 Webpack 4 项目，当使用 webpack-dev-server 时，构建完成后我收到了大量日志记录，但我确实不需要。

\n\n

i \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\n\xe2\x80\xbc \xef\xbd\xa2wdm\xef\xbd\xa3: Built at: 2018-4-15 09:15:18\nEntrypoint main = styles.css bundle.js\n[./node_modules/ansi-html/index.js] 4.16 KiB {main}\n[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main}\n[./node_modules/react-dom/index.js] 1.33 KiB {main}\n[./node_modules/react/index.js] 190 bytes {main}\n[./node_modules/url/url.js] 22.8 KiB {main}\n[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main}\n[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js\n3.58 KiB {main}\n[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main}\n[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main}\n[./node_modules/webpack/hot sync ^\\.\\/log$] (webpack)/hot sync nonrecursive ^\\.\\/log$ 170 bytes {main}\n[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main}\n[./source/scripts/components/app.js] 2.11 KiB {main} [1 warning]\n[./source/scripts/index.js] 454 bytes {main}\n[./source/styles/main.scss] 39 bytes {main} [built]\n   [0] multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js 40 bytes {main}\n    + 36 hidden modules\n\nWARNING in ./source/scripts/components/app.js\n\nC:\\...\\source\\scripts\\components\\app.js\n  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function\n\n\xe2\x9c\x96 1 problem (0 errors, 1 warning)\n\n @ ./source/scripts/index.js 11:11-38\n @ multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js\nChild 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:\n    Entrypoint mini-css-extract-plugin = *\n    [./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}\n    [./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]\n    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {mini-css-extract-plugin}\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled with warnings.\n

\n\n

有什么办法可以将其减少到仅重要的事情吗？与此类似的输出将是理想的

\n\n

i \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\n\xe2\x80\xbc \xef\xbd\xa2wdm\xef\xbd\xa3: Built at: 2018-4-15 09:15:18\n\nWARNING in ./source/scripts/components/app.js\n\nC:\\...\\source\\scripts\\components\\app.js\n  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function\n\n\xe2\x9c\x96 1 problem (0 errors, 1 warning)\n\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled with warnings.\n

\n\n

我当前的 webpack.config.js 有以下内容：

\n\n

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

\n

Answer 1

只需要多读一点文档..

\n\n

我已经设法将我的输出降低到：

\n\n

i \xef\xbd\xa2wdm\xef\xbd\xa3: Compiling...\n\xe2\x80\xbc \xef\xbd\xa2wdm\xef\xbd\xa3: Built at: 2018-4-15 09:36:12\n\nWARNING in ./source/scripts/components/app.js\n\nC:\\code\\land-calculator\\source\\scripts\\components\\app.js\n  3:1  warning  Component should be written as a pure function  react/prefer-stateless-function\n\n\xe2\x9c\x96 1 problem (0 errors, 1 warning)\n\n @ ./source/scripts/index.js 11:11-38\n @ multi (webpack)-dev-server/client?http://localhost:8080 ./source/scripts/index.js\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled with warnings.\n

\n\n

为此，我将统计设置更新为以下内容：

\n\n

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

\n