webpack CommonsChunkPlugin的切入点是什么？

Question

在我的webpack配置中，我的条目定义如下-

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

我已经意识到，我的包大小大约是8 mb的大小。

因此，我决定将供应商的javascript文件分成不同的块，即bundle.vendor.js。

我知道我必须为此使用CommonsChunkPlugin，并将条目更改为如下所示

  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }

但无法确定如何更改当前设置为

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

Answer 1

1.您需要告诉Webpack您的入口点，在本例中，您可以将供应商条目定义为依赖项数组。如下所示：

entry: {
   app: path.join(__dirname, 'path/to/app.jsx'), // prefer using absolute paths to avoid problems
   vendors: ['jquery', 'lodash']
}

2.您需要告诉Webpack哪些条目应该优化：注意在插件的配置“名称”中传递第二个字符串。这是Webpack将生成的另一个文件的名称。它将负责告诉浏览器如何正确处理依赖项，并将包括在应用程序和供应商脚本标记之前。

plugins : [
   new webpack.optimize.CommonsChunkPlugin({
      names: ['vendors', 'manifest']
   })
]

如果你需要的话，我有一个使用此操作示例进行回购。。CommonsChunk部件处于prod配置中。