如何为 webpack 配置中的每个入口点指定不同的路径和文件名？ （尽管遵循了文档，但我的配置无效）

Question

我希望能够为我的 webpack 配置中的每个条目提供一个特定的路径和文件名。具体来说，webpack“输出文件名”文档中的this example 是我想要的：

module.exports = {
  //...
  entry: {
    app: './app.js',
    home: { import: './contact.js', filename: 'pages/[name][ext]' },
    about: { import: './about.js', filename: 'pages/[name][ext]' }
  }
};

这是我对该示例的实现：

const path = require('path')
const extSourceDir = path.resolve(__dirname, '../src')

module.exports = {
  //...
 entry: {
        main: {
            import: path.join(extSourceDir, '/scripts/content-scripts/main.ts'),
            filename: 'js/content/[name].js',
        },
        'doclist-audit': {
            import: path.join(
                extSourceDir,
                '/scripts/content-scripts/doclist-audit.ts'
            ),
            filename: 'js/content/[name].js',
        },
        'listing-popovers': {
            import: path.join(
                extSourceDir,
                '/scripts/content-scripts/listing-popovers.ts'
            ),
            filename: 'js/content/[name].js',
        },
        listing: {
            import: path.join(extSourceDir, '/scripts/content-scripts/listing.ts'),
            filename: 'js/content/[name].js',
        },
        background: {
            import: path.join(extSourceDir, '/scripts/background.ts'),
            filename: 'js/background/[name].js',
        },
        popup: {
            import: path.join(extSourceDir, '/react/views/Popup/Index.tsx'),
            filename: 'js/interface/[name].js',
        },
        options: {
            import: path.join(extSourceDir, '/react/views/Options/Index.tsx'),
            filename: 'js/interface/[name].js',
        },
        edit: {
            import: path.join(extSourceDir, '/react/views/Edit/Index.tsx'),
            filename: 'js/interface/[name].js',
        },
  }
};

我知道这种入口点配置是有效的，因为它在"Output Filename" section of the Webpack Documentation

但是，我收到一条错误消息，指出我的配置无效。具体来说，我的错误是这样的：

D:\Repos\Russ_Lyon\Chrome\connect-plus\node_modules\webpack\lib\webpack.js:31
                throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^
WebpackOptionsValidationError: 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['main'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['main'] should be an array:
      [non-empty string]
      -> A non-empty array of non-empty strings
    * configuration.entry['main'] should be one of these:
      [non-empty string]
      -> All modules are loaded upon startup. The last one is exported.
    * configuration.entry['main'] should be one of these:
      non-empty string | [non-empty string]
      -> An entry point with name
    at webpack (D:\Repos\Russ_Lyon\Chrome\connect-plus\node_modules\webpack\lib\webpack.js:31:9)
    at Object.<anonymous> (D:\Repos\Russ_Lyon\Chrome\connect-plus\bin\webpack\watch.js:12:39)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Module._compile (D:\Repos\Russ_Lyon\Chrome\connect-plus\node_modules\pirates\lib\index.js:99:24)   
    at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Object.newLoader [as .js] (D:\Repos\Russ_Lyon\Chrome\connect-plus\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (D:\Repos\Russ_Lyon\Chrome\connect-plus\bin\babel\watch.js:9:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)

我正在使用webpack v4.44.2 和webpack-cli v3.3.12，我认为它们分别是最新版本。

此外，我已经测试了我的配置中的那些 path.join(somePathHere, someOtherPathHere) 表达式正确地评估为字符串的有效路径。他们确实做到了。

我做错了什么？尽管我的代码与文档匹配，为什么我会收到此错误？任何和所有的帮助或输入将不胜感激:)。

Answer 1

刚刚也被这个击中了。

该文档是针对 Webpack 5 的，当您尝试在 Webpack 4 中使用此功能时会收到此错误消息。