在webpack4中分割块的正确方法是什么>> [

Question

我有三个文件：index.js，foo.js和bar.js。以下是其内容：

/** index.js */
import foo from './foo'
import bar from './bar'
// ...
/** foo.js */
export default function foo () {/* some code */}
// ....
/** bar.js */
import lodash from 'lodash'
export default function bar () {/* some code using lodash */}

我的目标是使用webpack获得类似的输出：

main.89sfds.js // the entry
runtime~main.dfsdf78.js // webpack runtime
vendors~main.90fsd0fs.js // lodash
foo.dfjiusdf.js // bundle foo module
bar.89sdfsdfs.js // bundle bar module

所以我尝试使用此配置文件：

module.exports = {
  optimization: {
    runtimeChunk: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        foo: {
          test: path.resolve('src/foo.js'),
          name: 'foo',
          enforced: true
        },
        bar: {
          test: path.resolve('src/bar.js'),
          name: 'bar',
          enforced: true
        }
      }
    }
  }
}

但是输出变为：

main.4f34rwf.js // the entry
runtime~main.sf24fds.js // webpack runtime
foo.sf4df3e.js // bundle foo module
bar.4389sfd.js // bundle bar module

如您所见，vendor丢失（现在包含在main.js中）

似乎我只是尝试捆绑一个模块，foo.js或bar.js，则显示vendor。

所以，如何获得正确的输出？

我有三个文件：index.js，foo.js和bar.js。下面是它们的内容：/ ** index.js * /从'./foo'导入foo从'./bar'导入bar // ... / ** foo.js * /导出默认函数foo（）{/ *一些...

Answer 1

我知道了。很简单的原因。