javascript - 如何定义 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'
  ],

score 1 · Accepted Answer

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']
   })
]

如果您需要，我有一个带有此工作示例的存储库。CommonsChunk 部分在 prod 配置中。

1 回答 1