鍍金池/ 問答/HTML/ webpack 的開發(fā)者模式 顯示asset 詳細信息

webpack 的開發(fā)者模式 顯示asset 詳細信息

1， 我把項目從webpack 1.XX 升級了，升級的大版本是3.XX

2，以前的開發(fā)者模式,是用webpack-dev-middleware這個組件來實現(xiàn)的，而且那個時候開發(fā)者模式比較詳細：

clipboard.png會有這些信息，但是我升級webpack到3.XXX之后

使用開發(fā)者模式，就沒有這樣的詳情了，因為我要優(yōu)化項目，比如那些文件過大，需要壓縮調(diào)整等等。。

現(xiàn)在是這樣：

clipboard.png

現(xiàn)在的啟動命令這個：
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

我也查了 webpack-dev-server的文檔，沒有找到如何配置，顯示詳細的asset 打包信息
？？ 有人遇到過嗎？

回答
編輯回答
巴扎嘿

你貼的webpack-dev-server --inline --progress --config build/webpack.dev.conf.js看起來是開發(fā)的指令，不是構(gòu)建的。
找到運行webpack()構(gòu)建的js文件。
在webpack的調(diào)用里加上process.stdout.write這塊。

  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    //
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    //
    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
2018年9月16日 23:01