关于webpack的optimize.CommonsChunkPlugin的文件生成问题

Question

问题是:
1.mainifest和vendor是干嘛?
2.build之后,生成的html的scritpt居然带上了?

build的时候发现build出了一些文件,不知道为什么mainifest和vendor是干嘛的

➜  static ls -1 js
app.5945d04d354b51405f5a.js
manifest.3378dfda55d1bfb8710d.js
vendor.df0961104544908e1df2.js

查看webpack.prod.conf.js发现用了这个插件进行处理,但是没有看懂为啥要这么做

   // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })

查了官网的http://webpack.github.io/docs... 也是不甚了解,所以来咨询大家,谢谢.

Answer 1

CommonsChunkPlugin是提取公共代码块用的，vendor是一般规则的命名，你可以写成其他的都可以。

new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',  ／／name是提取公共代码块后js文件的名字。
      chunks: ['vendor'] ／／只有在vendor中配置的文件才会提取公共代码块至manifest的js文件中
    })

一般在entry中都会配置的
具体的你可以看看这个例子
https://segmentfault.com/a/11...

Answer 2

name: 'vendor',

  minChunks: function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

这段代码可以换吗