几个会影响到 webpack 开启本地服务时打印消息的配置

前言

有些脚手架工具会自动帮你在项目中配置 webpack,比如 vue-cli 等,省去了开发者大量开发时间

但如果是自己手动配置 webpack 的,在用 webpack 开启本地服务的时候,可能会出现打印消息不够精简的情况,比如像下面这样

PS F:\JSproject\vue-lite-datepicker> npm run test

> vue-lite-datepicker@1.1.1 test F:\JSproject\vue-lite-datepicker
> webpack-dev-server --config webpack.dev.js

i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wdm」: Hash: 3332a9c5e8df15d8384b
Version: webpack 4.12.0
Time: 5621ms
Built at: 2020-02-26 21:10:27
    Asset     Size  Chunks             Chunk Names
bundle.js  747 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./example/example.vue] 1.05 KiB {main} [built]
[./example/example.vue?vue&type=script&lang=js] 338 bytes {main} [built]
[./example/index.js] 597 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 8.45 KiB {main} [built]
[./node_modules/url/url.js] 22.6 KiB {main} [built]
[./node_modules/url/util.js] 672 bytes {main} [built]
[./node_modules/vue/dist/vue.common.js] 280 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./example/index.js 40 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 89 bytes {main} [built]
[./src/index.js] 399 bytes {main} [built]
    + 35 hidden modules
i 「wdm」: Compiled successfully.

其实像这样的打印消息是可以配的,跟下面三个配置项有关

devServer.quiet

boolean

启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台,这也意味着来自 webpack 的错误或警告在控制台不可见

quiet: true

在 CLI 中使用

webpack-dev-server --quiet

devServer.noInfo

boolean

启用 noInfo 后 打包信息和模块构建信息等将被隐藏,错误和警告仍然会显示

noInfo: true

devServer.stats

string|object

有一些预设选项,可作为快捷方式,像这样使用它们:

stats: "errors-only"
预设选项 代替值 描述
errors-only none 只在发生错误时输出
minimal none 只在发生错误或有新的编译时输出
none false 没有输出
normal true 标准输出
verbose none 全部输出

对于更加精细的控制,下列这些选项可以准确地控制并展示想要的信息(注意,此对象中的所有选项都是可选的)

stats: {

  // 未定义选项时,stats 选项的备用值(fallback value)(优先级高于 webpack 本地默认值)
  all: undefined,

  // 添加资源信息
  assets: true,

  // 对资源按指定的字段进行排序
  // 你可以使用 `!field` 来反转排序。
  assetsSort: "field",

  // 添加构建日期和构建时间信息
  builtAt: true,

  // 添加缓存(但未构建)模块的信息
  cached: true,

  // 显示缓存的资源(将其设置为 `false` 则仅显示输出的文件)
  cachedAssets: true,

  // 添加 children 信息
  children: true,

  // 添加 chunk 信息(设置为 `false` 能允许较少的冗长输出)
  chunks: true,

  // 将构建模块信息添加到 chunk 信息
  chunkModules: true,

  // 添加 chunk 和 chunk merge 来源的信息
  chunkOrigins: true,

  // 按指定的字段,对 chunk 进行排序
  // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
  chunksSort: "field",

  // 用于缩短 request 的上下文目录
  context: "../src/",

  // `webpack --colors` 等同于
  colors: false,

  // 显示每个模块到入口起点的距离(distance)
  depth: false,

  // 通过对应的 bundle 显示入口起点
  entrypoints: false,

  // 添加 --env information
  env: false,

  // 添加错误信息
  errors: true,

  // 添加错误的详细信息(就像解析日志一样)
  errorDetails: true,

  // 将资源显示在 stats 中的情况排除
  // 这可以通过 String, RegExp, 获取 assetName 的函数来实现
  // 并返回一个布尔值或如下所述的数组。
  excludeAssets: "filter" | /filter/ | (assetName) => ... return true|false |
    ["filter"] | [/filter/] | [(assetName) => ... return true|false],

  // 将模块显示在 stats 中的情况排除
  // 这可以通过 String, RegExp, 获取 moduleSource 的函数来实现
  // 并返回一个布尔值或如下所述的数组。
  excludeModules: "filter" | /filter/ | (moduleSource) => ... return true|false |
    ["filter"] | [/filter/] | [(moduleSource) => ... return true|false],

  // 和 excludeModules 相同
  exclude: "filter" | /filter/ | (moduleSource) => ... return true|false |
    ["filter"] | [/filter/] | [(moduleSource) => ... return true|false],

  // 添加 compilation 的哈希值
  hash: true,

  // 设置要显示的模块的最大数量
  maxModules: 15,

  // 添加构建模块信息
  modules: true,

  // 按指定的字段,对模块进行排序
  // 你可以使用 `!field` 来反转排序。默认是按照 `id` 排序。
  modulesSort: "field",

  // 显示警告/错误的依赖和来源(从 webpack 2.5.0 开始)
  moduleTrace: true,

  // 当文件大小超过 `performance.maxAssetSize` 时显示性能提示
  performance: true,

  // 显示模块的导出
  providedExports: false,

  // 添加 public path 的信息
  publicPath: true,

  // 添加模块被引入的原因
  reasons: true,

  // 添加模块的源码
  source: true,

  // 添加时间信息
  timings: true,

  // 显示哪个模块导出被用到
  usedExports: false,

  // 添加 webpack 版本信息
  version: true,

  // 添加警告
  warnings: true,

  // 过滤警告显示(从 webpack 2.4.0 开始),
  // 可以是 String, Regexp, 一个获取 warning 的函数
  // 并返回一个布尔值或上述组合的数组。第一个匹配到的为胜(First match wins.)。
  warningsFilter: "filter" | /filter/ | ["filter", /filter/] | (warning) => ... return true|false
}

演示

简单配置一下 webpack 的 devServer

devServer: {
  stats: {
    builtAt: false,
    version: false,
    timings: false,
    entrypoints: false,
    modules: false,
  },
}

打印信息就成了下面这样

PS F:\JSproject\vue-lite-datepicker> npm run test

> vue-lite-datepicker@1.1.1 test F:\JSproject\vue-lite-datepicker
> webpack-dev-server --config webpack.dev.js

i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wdm」: Hash: 3332a9c5e8df15d8384b
    Asset     Size  Chunks             Chunk Names
bundle.js  747 KiB    main  [emitted]  main
i 「wdm」: Compiled successfully.

是不是精简多了

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1083.html
京ICP备19044523号-1