javascript - 如何定义 webpack CommonsChunkPlugin 的入口点？

Question

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

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

我意识到生成的 bundle 大小约为 8 mb。

因此我决定将 vendor javascript 文件拆分为单独的 block ，即 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 您的入口点，在这种情况下，您可以将 vendors 条目定义为依赖项数组。像这样:

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

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

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

如果你需要的话，我有一个repo with a working example of this 。 CommonsChunk 部分位于 prod 配置中。