CODEWITHSUNDEEP
javascriptwebpack
nanobar
nanobar

Reputation: 66435

Webpack how to export something when entry is an array

If I do the normal thing and have a string path, the default export works:

entry: {
  'someExportName': './src/index.js'
}

However I'm trying to refactor a legacy project which exports multiple css files, one of them has the same name as the JS file:

entry: {
  'someExportName': ['./src/index.js', './src/themes/default.less'],
  'someExportName.nonDefaultTheme': './src/themes/nonDefaultTheme.less',
}

The problem is that if I use an array, even though I get someExportName.js and someExportName.css, Webpack no longer knows what the default export of the library should be. In the generated code it goes from:

return __webpack_require__(__webpack_require__.s = "./src/index.js");

To:

return __webpack_require__(__webpack_require__.s = 0);

I'm thinking I will have to create a css file with a different name and then rename it after, but I'm wondering if webpack has a non-hacky way of choosing what to export when we use an array? Thanks.

Upvotes: 1

Views: 271

Answers (2)

nanobar
nanobar

Reputation: 66435

It sounds like @sdgluck's answer should work, indeed I found it written here too - https://github.com/webpack/webpack.js.org/issues/1703

Sadly no luck for me. What I've done is for the CSS file which has to have the same name, I imported that into ./src/index.js so that in combination with MiniCssExtractPlugin a css file with the same name is created and I can avoid using the array.

Upvotes: 0

sdgluck
sdgluck

Reputation: 27327

When using an array as the value of an entry, the last element is what is exported by the bundle produced for that entry.

So move your JS files to the end of their respective entry array:

entry: {
  'someExportName': ['./src/themes/default.less', './src/index.js'],
  'someExportName.nonDefaultTheme': './src/themes/nonDefaultTheme.less',
}

Upvotes: 1

Related Questions