Webpack load different index file by default

I am using webpack with HtmlWebpackPlugin plugin.

Let’s say I have a file foo/index.js and if I import it as import { foo } from './foo' it works.

But I need to configure webpack such that if I have file foo/index.web.js and import { foo } from './foo' webpack should load index.web.js first.

Load order should be

  1. index.web.js
  2. index.js (if index.web.js not found)

Answer

This should be only a matter of adding .web.js as an extension in webpack resolve configuration before the .js

module.exports = {
  //...
  resolve: {
    extensions: ['.web.js', '.js', '.json'],
  },
};

https://webpack.js.org/configuration/resolve/

In fact create-react-app does this by default (with the .web.js)