Webpack忽略统计选项

时间:2018-01-25 21:39:10

标签: javascript node.js reactjs webpack

更新

@Daniel Khoroshko的答案修正了我的统计数据问题。为了将来参考,webpack可以(至少)4种方式处理统计数据:

  1. stats视为常规网络包选项https://webpack.js.org/configuration/stats/
  2. 如果使用devServer,则必须将其放置在该对象中(请参阅上面链接中的注释)
  3. 如果使用Node API,它必须在回调函数中。 https://webpack.js.org/api/node/#stats-object
  4. 正如Daniel指出的那样,webpack-dev-middleware会覆盖统计数据,因此对象必须位于https://github.com/webpack/webpack-dev-middleware#stats
  5. =============================================== =

    使用webpack 3.10我试图压制我收到的数百万extract-text-webpack-plugin日志。

    我们正在使用webpack Node API。在我们的server.js节点入口点,我们有:

    // server.js
    
    const app = express();
    
    if (environment.isLocal) {
      require('./webpackConfig')(app);
    } else {
      app.use(compression());
    }
    // other stuff
    

    我们在webpack中使用node:

    // webpackConfig.js
    
    const webpack = require('webpack');
    const config = require('../webpack.config.dev');
    
    module.exports = (app) => {
      const compiler = webpack(config, (err, stats) => {
        stats.toJson("none"); // none for brevity, but not working
      });
    
      app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
      }));
    
      app.use(require('webpack-hot-middleware')(compiler));
    };
    

    最后,整个配置

    // webpack.config.dev.js
    
    module.exports = {
      devtool: 'cheap-module-source-map',
      entry: {
        app: [
          'eventsource-polyfill',
          'webpack-hot-middleware/client?reload=true',
          './src/index'
        ]
      },
      target: 'web',
      output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: '[name].js'
      },
      devServer: {
        contentBase: './src'
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new ExtractTextPlugin('[name]-[hash].css'),
        new HtmlWebpackPlugin({
          title: 'annoying webpack', 
          template: './src/index.html', 
          alwaysWriteToDisk: true,
          inject: false
        }),
        new HtmlWebpackHarddiskPlugin()
      ],
      module: {
        rules: [
          {
            test: /\.js$/,
            enforce: 'pre',
            loader: require.resolve('eslint-loader'),
            options: {
              failOnWarning: false,
              failOnError: false
            },
            exclude: /node_modules|dist/
          },
          {
            test: /\.js$/,
            include: [path.join(__dirname, 'src')]
            loader: 'babel-loader'
          }
        ]
      }
    };
    

    在控制台中输出

    webpack building...
    webpack built c22fd3ae797ecd55eccc in 7410ms
    ℹ 「wdm」: Hash: c22fd3ae797ecd55eccc
    Version: webpack 3.10.0
    Time: 7410ms
                           Asset       Size  Chunks                    
    Chunk Names
                          app.js    2.53 MB       0  [emitted]  [big]  
    app
    app-c22fd3ae797ecd55eccc.css     125 kB       0  [emitted]         
    app
                      app.js.map    2.97 MB       0  [emitted]         
    app
    app-c22fd3ae797ecd55eccc.css.map    4.71 kB       0  [emitted]         
    app
                      index.html  275 bytes          [emitted]
       [3] ./node_modules/react/react.js 56 bytes {0} {0} [built]
     [100] ./node_modules/react-dom/index.js 59 bytes {0} {0} [built]
     [107] ./node_modules/react-redux/es/index.js 230 bytes {0} {0} 
    [built]
       ..... 
        + 867 hidden modules
        Child html-webpack-plugin for "index.html":
             Asset    Size  Chunks  Chunk Names
        index.html  568 kB       0
        .....   
    ℹ 「wdm」: Compiled successfully.
    webpack built d7509fff9f1c995bf5ee in 7523ms
    ℹ 「wdm」: Hash: d7509fff9f1c995bf5ee
    Version: webpack 3.10.0
    Time: 7523ms
                           Asset       Size  Chunks                    
    Chunk Names
                          app.js    2.53 MB       0  [emitted]  [big]  
    app
    app-d7509fff9f1c995bf5ee.css     125 kB       0  [emitted]         
    app
                      app.js.map    2.97 MB       0  [emitted]         
    app
    app-d7509fff9f1c995bf5ee.css.map    4.71 kB       0  [emitted]         
    app
                      index.html  275 bytes          [emitted]
       [5] ./src/App.js 3.62 kB [built]
       [6] ./src/store/configureStore.js 325 bytes [built]
       .....
        + 867 hidden modules
    Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks  Chunk Names
    index.html  568 kB       0
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 646 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
    ℹ 「wdm」: Compiled successfully.
    

1 个答案:

答案 0 :(得分:4)

关于统计信息选项webpack-dev-middlewarewebpack-dev-server有自己的统计信息设置,我想这会覆盖webpack自己的设置。我建议尝试这个

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: 'errors-only'
  }));