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

问题描述

我希望能够为我的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'
            ),'listing-popovers': {
            import: path.join(
                extSourceDir,'/scripts/content-scripts/listing-popovers.ts'
            ),listing: {
            import: path.join(extSourceDir,'/scripts/content-scripts/listing.ts'),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'),edit: {
            import: path.join(extSourceDir,'/react/views/Edit/Index.tsx'),}
};

我知道这种入口点配置是有效的，因为它在"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)表达式可以正确评估为字符串的有效路径。而且他们做到了。

我在做什么错？尽管我的代码与文档匹配，但为什么仍然出现此错误？任何帮助或帮助将不胜感激:)。

解决方法

也受到了打击。

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