How to specify a different path AND filename for each entry point in your webpack config? (my config is invalid despite following the docs)

I want to be able to have a specific path AND filename for each entry in my webpack config. Specifically, this example from the webpack “Output Filename” documentation is what I want:

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

And here is my implementation of that example:

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',
        },
  }
};

I know that this kind of entry point config is valid because its in the “Output Filename” section of the Webpack Documentation

However, I am receiving an error stating my config is invalid. Specifically, my error is this:

D:ReposRuss_LyonChromeconnect-plusnode_moduleswebpacklibwebpack.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:ReposRuss_LyonChromeconnect-plusnode_moduleswebpacklibwebpack.js:31:9)
    at Object.<anonymous> (D:ReposRuss_LyonChromeconnect-plusbinwebpackwatch.js:12:39)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Module._compile (D:ReposRuss_LyonChromeconnect-plusnode_modulespirateslibindex.js:99:24)   
    at Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Object.newLoader [as .js] (D:ReposRuss_LyonChromeconnect-plusnode_modulespirateslibindex.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:ReposRuss_LyonChromeconnect-plusbinbabelwatch.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)

I am using webpack v4.44.2 and webpack-cli v3.3.12, which I believe are the latest versions respectively.

Furthermore, I have tested that those path.join(somePathHere, someOtherPathHere) expressions in my config evaluate properly to a valid path as a string. And they do.

What am I doing wrong? Why am I getting this error, despite my code matching the documentation? Any and all help or input would be greatly appreciated 🙂 .

Answer

Just got hit by this as well.

The documentation is for Webpack 5, and this error message is what you get when trying to use this feature in Webpack 4.