0

我的供应商捆绑包变得非常大，我想分成两部分。（一部分包含所有与 react 相关的包，另一部分包含其余的包）。

我目前必须创建供应商捆绑包是：

new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor'],
  filename: '[name].bundle.js',
  minChunks: module => module.context.includes('node_modules')
})

我尝试在下面添加这些不同的方法，但到目前为止没有成功：

// approach 1
new webpack.optimize.CommonsChunkPlugin({
  name: 'react',
  chunks: ['vendor'],
  minChunks: ({resource}) => (/node_modules\/react/).test(resource)
})

// approach 2
new webpack.optimize.CommonsChunkPlugin({
  name: ['react'],
  filename: '[name].bundle.js',
  minChunks: ({resource}) => (/node_modules\/react/).test(resource)
})

分裂发生了，但我无法在浏览器中运行。在我的控制台中，我得到：

vendor.bundle.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at vendor.bundle.js:1

(anonymous) @ vendor.bundle.js:1 
12:52:57.478 react.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (react.bundle.js:55)
at eval (react.development.js:18)
at eval (react.development.js:1356)
at Object.603 (react.bundle.js:747)
at __webpack_require__ (react.bundle.js:55)
at eval (index.js:6)
at Object.0 (react.bundle.js:156)
at __webpack_require__ (react.bundle.js:55)
at eval (index.jsx:8)
at Object.<anonymous> (client.bundle.js:1375)

我已经在我的 html 中加载了带有标签的新文件。

4

2 回答 2

3

我刚刚使用以下解决方案解决了这个问题：

new webpack.optimize.CommonsChunkPlugin({
  name: ['vendor'],
  filename: '[name].bundle.js',
  minChunks: module => module.context.includes('node_modules') && !module.request.includes('scss')
}),

new webpack.optimize.CommonsChunkPlugin({
  name: 'react',
  chunks: ['vendor'],
  minChunks: ({resource}) => (/node_modules\/react/).test(resource)
}),
于 2018-03-28T19:06:21.797 回答
0

处理它的一种简单方法是指定供应商的内容并在 entry 属性中做出如下反应：

entry: {
    app: ['./src/index.js'],
    react: [
      'react',
      'react-dom'],
    vendor: [
      'other-libraries',
    ]
  }

然后你可以像这样在 CommonsChunkPlugin 中指定这些条目：

new webpack.optimize.CommonsChunkPlugin({
      name: ['react', 'vendor']
    })
于 2018-03-27T09:21:18.760 回答