文章/答案/技术大牛

发布

社区首页 >问答首页 >在webpack中，我只能在一个入口捆绑包中使用commonchunks插件

问在webpack中，我只能在一个入口捆绑包中使用commonchunks插件
EN

Stack Overflow用户

提问于 2017-02-16 11:31:52

回答 1查看 368关注 0票数 0

我有一个有2个捆绑包的应用程序，react等常用模块被提取到一个供应商捆绑包中。我正在添加第三个包，我不想从中提取公共依赖项。这有没有可能。

这个问题与this one相关，但是这是关于为每个入口点创建多个供应商捆绑包，而我希望其中一个捆绑包不需要供应商。在我的例子中，这是因为脚本是一个简单的站点验证脚本，它被设置在头部中，因此将在vendor捆绑包之前设置。但是，我仍然希望能够使用此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;

javascript

webpack

回答 1

Stack Overflow用户

发布于 2017-02-16 12:08:09

看起来关于代码拆分多个包的类似问题确实帮助回答了我的问题。特别是Michael Margiel的答案，将多个供应商捆绑包指定为多个CommonsChunkPlugins，我认为这是最干净的方法。

让特定于入门级的供应商块多次使用CommonsChunkPlugins：

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

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

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

这使得我可以在没有任何供应商的情况下拥有捆绑包，而不需要任何额外的步骤，但是如果我愿意的话，我可以为第三个捆绑包提供一个供应商。

我的配置最终是这样的：

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;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42264340

复制

相似问题

问在webpack中，我只能在一个入口捆绑包中使用commonchunks插件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在webpack中，我只能在一个入口捆绑包中使用commonchunks插件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在webpack中，我只能在一个入口捆绑包中使用commonchunks插件
EN