CODEWITHSUNDEEP
webpackwebpack-4
abhchand
abhchand

Reputation: 535

Using Webpack's `dependOn` with multiple files per entry

The webpack docs state that you can use dependOn in combination with an array of files for each entry. Here's the example they give:

module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types']
  }
};

In my application I have two page-specific assets that both depend on a "common" pack, so I use the above approach

NOTE: Webpack supports mixing SCSS and JS files via the MiniCssExtractPlugin

module.exports = {
  // ...
  
  'entry': {
    'common': [
      `${ASSETS_DIR}/javascript/packs/common.js`,
      `${ASSETS_DIR}/stylesheets/packs/common.scss`
    ],

    'pageOne': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageOne.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageOne.scss`
      ],
      'dependOn': 'common'
    },

    'pageTwo': {
      'import': [
        `${ASSETS_DIR}/javascript/packs/pageTwo.js`,
        `${ASSETS_DIR}/stylesheets/packs/pageTwo.scss`
      ],
      'dependOn': 'common'
    }

  }
}

However I receive an error that my configuration is incorrect:

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['pageTwo'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['pageTwo'] should be an array:
      [non-empty string]
      -> A non-empty array of non-empty strings
    * configuration.entry['pageTwo'] should be one of these:
      [non-empty string]
      -> All modules are loaded upon startup. The last one is exported.
    * configuration.entry['pageTwo'] should be one of these:
      non-empty string | [non-empty string]
      -> An entry point with name

Any reason why Webpack doesn't like this configuration format?

Here's the versions I'm using:

$ cat package.json | grep webpack
    ....

    "webpack-dev-server": "^3.8.2"
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "copy-webpack-plugin": "^5.0.5",
    "webpack": "^4.41.2",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-cli": "^3.3.9"

Thanks!

Upvotes: 1

Views: 3237

Answers (1)

abhchand
abhchand

Reputation: 535

I didn't realize that Webpack v5 was recently released. At the time of this writing, it's still in beta, so I didn't realize the docs had officially switched over to v5 already.

Looking at the same functionality on the v4 docs, it doesn't seem to support multiple files per entry in the same way.

So the answer is to upgrade to v5 for this feature.

Upvotes: 2

Related Questions