如何定义 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 你的入口点，在这种情况下，你可以将 vendors 入口定义为一个数组依赖项。像这样：

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 配置中。

How to define entry point for webpack CommonsChunkPlugin?