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

score 1 · Accepted Answer · answered Sep 24 '20 at 18:40

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.

answered Sep 24 '20 at 18:40

joakimriedel

1,801
12
27

You are correct. I am just finding it out this morning. I tested it, and it worked with `webpack v5.0.0-rc.0` ( `npm i -D webpack@next`). Thank you. – robquinn Sep 25 '20 at 10:04
Thanks for asking, your post was the only result on this particular error. Now you'll spend the rest of the day migrating webpack-cli and figuring out how to make it work properly with all the other beta versions. IE11 support was a challenge due to v5 defaults. But it will work in the end. Happy hacking – joakimriedel Sep 25 '20 at 16:08

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

1 Answers1