2017-02-24 81 views
2

Webpack 2与CommonsChunkPlugin相关的问题/说明。Webpack 2 CommonsChunkPlugin供应商软件包

{ 
    entry: { 
     app: './src/app.ts', 
     vendor: ['some-third-party-lib', 'another-third-party-lib'] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: '[name].js' 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: Infinity 
     }) ] 
} 

据我所知,CommonsChunkPlugin跳出即入口点之间共享到一个单独的束共同的代码。在上面的片段中,它会说“给我所有入口点'应用程序'和'供应商'之间的共享代码,并将它们放入vendor块/文件中。由于vendor既是一个入口点,也是一个共享块,结果是我的所有第三方库都以1个文件结尾(vendor.js)。我是否正确理解这一点?

+0

是的,正确!请参阅[Webpack指南](https://webpack.js.org/guides/)以获得更好的理解。 –

+0

是的webpack指南帮助我达到这个配置,但仍然缺乏一点连接IMO的点。感谢您的确认。 – bingles

回答

0

根据该文件,将minChunks选项CommonsChunkPlugin配置如下:

其中需要包含一个模块,然后再将其转移到公地大块大块的最低数量。

传递Infinity只是创建公用块,但不会将模块移入其中。

源:https://webpack.js.org/plugins/commons-chunk-plugin/#options

在您的例子中,CommonsChunkPlugin只会拉出来在vendor入口点指定的块,并且不会自动检测其他共享块。如果删除minChunks选项,插件会自动包含所有入口点引用的块。在这种情况下,你只有两个入口点,所以它没有什么区别。

相关问题