理解Webpack输出

Question

我尝试在1200模块（95％供应商）的观察模式下优化我们的6s构建时间。 我试着了解发生了什么，所以我可以加快速度。

我不明白的事情：

• [emit]意味着给定的块是建立的吗？
• 如何验证给定的块是否重建？
• 我怎么能看到chunkHash？ （我想确保webpack与md5的方式相同）
• 我可以寻找什么样的优化？

事实：

• 如果应用程序代码更改，则供应商软件包不会以监视模式写入磁盘，我通过修改日期进行验证并删除它。 触发重建时未创建该文件。 此外，供应商代码的md5哈希不会更改。
  • 大多数时间花在模块构建上，模块计数器从0-> 1200运行。

webpack配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchIgnorePlugin = require('watch-ignore-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

function isExternal(module) {
    var userRequest = module.userRequest;

    if (typeof userRequest !== 'string') {
          return false;
        }

    return userRequest.indexOf('bower_components') >= 0 ||
             userRequest.indexOf('node_modules') >= 0 ||
             userRequest.indexOf('libraries') >= 0;
}

module.exports = {
  context: __dirname + "/src",
  cache: true,
  cacheDirectory: '.cache',
  entry: {
      index: ["babel-polyfill", "./index"],
      login: "./login"
  },
  resolve: {
    alias: {
      config: path.join(__dirname, 'src/config', `${process.env.NODE_ENV || 'development'}`)
    },
    modulesDirectories: [
      'node_modules',
    ],
    unsafeCache: true,
    extensions: ["", ".js", ".jsx"]
  },
  devtool: 'eval',
  module: {
    loaders: [{
      test: /\.scss$/,
      include: /src/,
      exclude: /node_modules/,
      loader: ExtractTextPlugin.extract('css!sass')
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      include: /src/,
      loaders: ['style', 'css?sourceMap'],
    },
    {
      test: /\.jsx?$/,
      include: /src/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        "cacheDirectory": ".cache",
        "presets":  ["es2015", "stage-0", "react"],
        "plugins":  ["transform-class-properties", "transform-object-rest-spread"]
      }
    }],
    noParse: [
      /underscore\/underscore\.js$/,
      /react-with-addons\.js$/,
    ]
  },
  output: {
    filename: "[name].bundle.js",
    path: __dirname + "/dist",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module) {
        return isExternal(module);
      },
    }),
    new WatchIgnorePlugin([
      path.resolve(__dirname, './node_modules/'),
      path.resolve(__dirname, './.git/')
    ]),
    new CopyWebpackPlugin([
      { from: 'static', to: 'static' }
    ]),
    new CopyWebpackPlugin([
      { from: 'login.html', to: 'login.html' }
    ]),
    new CopyWebpackPlugin([
      { from: 'index.html', to: 'index.html' }
    ]),
    new ExtractTextPlugin('[name].css', {
      allChunks: true
    })
  ],
  watchOptions: {
    poll: 300,
    ignore: /node_modules/,
  },
  externals: {}
}

监视模式下的输出：

[mip] (+master)> node node_modules/webpack/bin/webpack.js --watch --progress --display-chunks --display-cached --display-reasons -v
Hash: fadbfa42fdd7810886d6  
Version: webpack 1.13.3
Time: 6346ms
                 Asset       Size  Chunks             Chunk Names
       index.bundle.js     582 kB       0  [emitted]  index
       login.bundle.js    8.88 kB       1  [emitted]  login
      vendor.bundle.js     4.9 MB       2  [emitted]  vendor
             index.css    87.2 kB       0  [emitted]  index
             login.css    44.4 kB       1  [emitted]  login
   static/img/logo.png    4.28 kB          [emitted]  
static/img/favicon.ico     270 kB          [emitted]  
            login.html  573 bytes          [emitted]  
            index.html  574 bytes          [emitted]  
chunk    {0} index.bundle.js, index.css (index) 519 kB {2} [rendered]
    [0] multi index 40 bytes {0} [built]
     + 100 hidden modules
chunk    {1} login.bundle.js, login.css (login) 7.33 kB {2} [rendered]
     + 5 hidden modules
chunk    {2} vendor.bundle.js (vendor) 4.41 MB [rendered]
     + 1191 hidden modules

Answer 1

如果您想加速初始开发构建，那么您将希望减少Webpack在分析块时花费的时间，减少HTTP请求的数量，为增量更改引入HMR。

您可以从删除CommonsChunkPlugin和ExtractTextPlugin 。 如果您希望从等式中获取供应商模块，那么您可以在一个编译中使用DllPlugin将它们构建为库，然后只要供应商源不更改，就可以继续将它们与DllReferencePlugin用于主捆绑编译。 您可以在优化文档中阅读有关这些内容的更多信息，但这是Rob Knight的一篇优秀文章 ，他提供了更多详细信息。

最后，在配置加载器时，确实没有必要询问Webpack是否正确地使块无效。 它们能够很好地跟踪磁盘上的依赖关系，并且会明智地使任何事情无效。 我可以推荐webpack-bundle-analyzer来分析你的输出。