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

Question

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:\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)

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 1

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.