是否可以在 webpack 构建期间记录进度？答案

【问题标题】：Is it possible to log the progress during a webpack build?是否可以在 webpack 构建期间记录进度？
【发布时间】：2019-09-24 01:51:55
【问题描述】：

当我运行 linting 时，如果出现问题，我会收到错误消息，否则我不会收到有关我执行了 linting 的通知。是否可以在插件或加载器执行后添加日志消息？

在我的特殊情况下，我想在“StyleLintPlugin”-plugin 和“tslint”-loader 之后添加日志消息。请参阅下面的 Webpack 配置。

import path from 'path';
import StyleLintPlugin from 'stylelint-webpack-plugin';

module.exports = {
  entry: path.resolve(__dirname, "js/index"),
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
    publicPath: '/'
  },
  target: 'web',
  watch: true, //Rebuild when file is changed
  devtool: 'source-map', //Let us debug the code without being modified
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.css', '.scss']
  },
  plugins: [
    //Used to lint sass files
    new StyleLintPlugin({
      configFile: '.stylelintrc',
      context: undefined,
      files: ['**/*.s?(a|c)ss'],
      failOnError: true,
      quiet: false
    }),
  ],
  module: {
    preLoaders: [
      {
        test: /\.ts$/,
        exclude: /node_modeules/,
        loader: 'tslint'
      }
    ],
    loaders: [
      { 
        test: /\.ts(x?)$/,
        exclude: /node_modeules/,
        loader: 'babel-loader!ts-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modeules/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.scss$/,
        exclude: /node_modeules/,
        loader: "style-loader!css-loader!sass-loader"
      }
    ],
  },
  tslint: {
    emitErrors: true,
    failOnHint: true
  }
}

【问题讨论】：

代码中没有错误或警告的情况下需要log什么？
当我弄乱配置时，我将“插件”部分放在模块下（错误地）。没有错误，但是通过日志记录我会（也许）看到日志丢失了。
当你没有任何 lint 错误/警告时，你不会得到日志
还有没有办法得到？
您可以编写自己的插件来显示日志。关注this

标签： javascript node.js webpack

【解决方案1】：

执行 webpack 构建以读取隐藏的错误，或获取完整日志（而不是“npm run dev”，尝试“npm run build”）。

开发服务器构建期间的隐藏错误是 WebPack 中一个已知但很少讨论且令人讨厌的错误，已存在多年。

您可以进行完整构建以查看对您隐藏错误的边缘情况下的错误。

修复错误后，您可以直接返回“npm run dev”。

【讨论】：