Webpack 网页包2：供应商、通用和特定捆绑包

使用

CommonChunkPlugin

我目前将代码分为：

vendors.js
common.js
page-1.js
page-2-authenticated.js
page-3-authenticated.js

因此，在

page-1.html

中，我加载以下脚本：

<script src="vendors.js" />
<script src="common.js" />
<script src="page-1.js" />

但是，当我在

common authenticated.js

中导出一个测试变量并将其导入

page-2-authenticated.js

和

page-3-authenticated.js

时，这个共享代码仍然绑定到

common.js

中。而且

common authenticated.js

是空的（只是一些

webpackJsonp（[12]，[85]）；

）

我有以下网页包2配置：

entry: {
  vendors: ['react'],
  common: 'index.js',
  'common-authenticated': 'common-authenticated.js',
  'page-1': 'page-1.js',
  'page-2-authenticated': 'page-2-authenticated.js',
  'page-3-authenticated': 'page-3-authenticated.js'
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    // The order of this array matters
    names: ['common', 'vendors'],
    minChunks: 2
  })
]

---

问题：如何将特定代码绑定到

common authenticated.js

？有什么想法吗？

我可以通过以下配置解决它：

entry: {
  // Same as in topic start
},

plugins: [
  /*
   * Check the files used for pages on which you need to be logged in
   * and bundle the shared code of these files in a chunk named
   * 'common-authenticated' (its output will be in 'common-authenticated.js')
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common-authenticated',
    chunks: [
      'page-2-authenticated',
      'page-3-authenticated'
    ],
    minChunks: 2
  }),

  /*
   * Now check for shared code in the bundle defined above plus the files for
   * pages on which you do not need to be logged in. Bundle this shared code into
   * 'common.js'
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: [
      'common-authenticated', // Name of the chunk defined above
      'page-1'
    ],
    minChunks: 2
  }),

  /*
   * I don't really now how this works. But it works :).
   * It generates the 'vendors.js'
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common', 'vendors'],
    minChunks: 2
  })
]

这正是我想要的。在

page-1.html

中加载脚本保持不变（我不需要

common authenticated.js

）。而且

page-2-authenticated.html

现在有：

//已验证用户的共享代码

entry: {
  // Same as in topic start
},

plugins: [
  /*
   * Check the files used for pages on which you need to be logged in
   * and bundle the shared code of these files in a chunk named
   * 'common-authenticated' (its output will be in 'common-authenticated.js')
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common-authenticated',
    chunks: [
      'page-2-authenticated',
      'page-3-authenticated'
    ],
    minChunks: 2
  }),

  /*
   * Now check for shared code in the bundle defined above plus the files for
   * pages on which you do not need to be logged in. Bundle this shared code into
   * 'common.js'
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: [
      'common-authenticated', // Name of the chunk defined above
      'page-1'
    ],
    minChunks: 2
  }),

  /*
   * I don't really now how this works. But it works :).
   * It generates the 'vendors.js'
   */
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common', 'vendors'],
    minChunks: 2
  })
]

<script src="vendors.js" />
<script src="common.js" />
<script src="common-authenticated.js" /> // Shared code for authenticated users
<script src="page-2-authenticated.js" />