如何为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哪些条目应该优化： 请注意，您在插件的配置“names”中传递了第二个字符串。它是Webpack生成的另一个文件的名称。它将负责告诉浏览器如何正确处理依赖关系，并将包含在您的应用程序和供应商脚本标记之前。

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

如果您需要，我有repo with a working example of this。 CommonsChunk部分属于prod配置。