Question

webpack docs状态表明您可以将1 2 3 4 5 6 7 8 9 10 11 12与每个条目的文件数组结合使用。这是他们提供的示例：

dependOn

在我的应用程序中，我有两个特定于页面的资产，它们都依赖于“公共”包，因此我使用上述方法

注意：Webpack支持通过MiniCssExtractPlugin

混合SCSS和JS文件

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types']
  }
};

但是我收到一个错误消息，指出我的配置不正确：

module.exports = {
  // ...
  
  'entry': {
    'common': [
      `${ASSETS_DIR}/javascript/packs/common.js`,
      `${ASSETS_DIR}/stylesheets/packs/common.scss`
    ],

    'pageOne': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageOne.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageOne.scss`
      ],
      'dependOn': 'common'
    },

    'pageTwo': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageTwo.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageTwo.scss`
      ],
      'dependOn': 'common'
    }

  }
}

为什么Webpack不喜欢这种配置格式？

这是我使用的版本：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry['pageTwo'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['pageTwo'] should be an array:
      [non-empty string]
      -> A non-empty array of non-empty strings
    * configuration.entry['pageTwo'] should be one of these:
      [non-empty string]
      -> All modules are loaded upon startup. The last one is exported.
    * configuration.entry['pageTwo'] should be one of these:
      non-empty string | [non-empty string]
      -> An entry point with name

谢谢！

Answer 1

我没有意识到Webpack v5是最近发布的。在撰写本文时，它仍处于测试阶段，因此我还没有意识到文档已正式转换到v5。

在v4 docs上使用相同的功能，似乎每个条目都无法以相同的方式支持多个文件。

所以答案是升级到此功能的v5。

使用Webpack的`dependOn`每个条目包含多个文件

1 个答案: