【Manifest File】
on every build, webpack generates some webpack runtime code, which helps webpack do its job. When there is a single bundle, the runtime code resides in it. But when multiple bundles are generated, the runtime code is extracted into the common module, here the vendor file.
To prevent this, we need to extract out the runtime into a separate manifest file. Even though we are creating another bundle, the overhead is offset by the long term caching benefits that we obtain on the vendor file.
var webpack = require('webpack');
var path = require('path');
module.exports = function() {
return {
entry: {
main: './index.js' //Notice that we do not have an explicit vendor entry here
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// this assumes your vendor imports exist in the node_modules directory
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
//CommonChunksPlugin will now extract all the common modules from vendor and main bundles
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
})
]
};
}
第一次执行vendor时，只有一个bundle，就是main。CommonsChunkPlugin会将node_modules从main中分享出来，从而成为vendor。
第二次执行manifest时，有两个bundle，main、vender。CommonsCHunkPlugin发现两个bunlde没有公共module，所以manifest内不含任何Module。
runtime code会放放置后最后成的bundle中。
参考：https://webpack.js.org/guides/code-splitting-libraries/#manifest-file