Question

我有一个包含2个捆绑包的应用程序，以及常见的模块，例如react被提取到供应商包中。我正在添加第3个捆绑包，我不想从中提取常见的依赖关系。这可能。

这个问题与this one有关，但是关于为每个入口点创建多个供应商捆绑包，而我希望其中一个捆绑包不需要供应商。在我的情况下，这是因为脚本是一个简单的站点验证脚本，正在设置在头部，因此将在vendor bundlde之前。但是我仍然希望能够在此head包中使用模块。

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: {
    vendor: [
      'jquery',
      'react',
      'react-dom'
    ],
    main: [
      './bundles/main/App',
    ],
    cms: [
      './bundles/cms/App'
    ],
    head: [
      './bundles/head/App'
    ],
  },
  output: {
    filename: '[name]-bundle.js',
    path: '../app/assets/webpack',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-bundle.js',
      minChunks: Infinity,
    })
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
    ],
  },
};

module.exports = config;

Answer 1

似乎关于代码拆分多个包的类似问题确实有助于回答我的问题。特别是迈克尔·玛吉尔（Michael Margiel）的回答是多个供应商捆绑包用多个CommonsChunkPlugins指定，我认为这是最干净的方法。

多次使用CommonsChunkPlugins具有特定于条目的供应商块：

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity)

然后为不同的文件声明不同的extenral库：

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery',
        'react'
    ]
},

这使我能够在没有任何其他供应商的情况下拥有捆绑包，而不需要任何额外的步骤，但是如果我愿意的话，我可以在第3个捆绑包中拥有供应商。

我的配置最终看起来像这样：

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: {
    head: ['./bundles/head/App'],
    main: ['./bundles/main/App'],
    cms: ['./bundles/cms/App'],
    'vendor': [
      'babel-polyfill',
      'jquery',
      'react'
    ],
    'vendor-cms': [
      'jquery'
    ]
  },
  output: {
    filename: '[name]-bundle.js',
    path: '../app/assets/webpack',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-bundle.js',
      chunks: ['main'],
      minChunks: Infinity,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor-cms',
      filename: 'vendor-cms-bundle.js',
      chunks: ['cms'],
      minChunks: Infinity,
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv)},
    }),
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
    ],
  },
};

module.exports = config;

在webpack中，我只能在一个条目包中使用commonchunks插件

1 个答案: