Webpack. Theming fallback

Question

Is it possible to resolve theming path as fallback with webpack?

So let's say I have next structure:

    app/
    ├── componentA/
    │   └─ index.js
    │
    └── themes/
        └── woot/
            └── componentA/
                └── index.js

And I do import

    import ComponentA from 'app/componentA/index.js';

Then depending on build I want to receive next:

1. for webpack → app/componentA/index.js
2. for THEME="woot" webpack → app/themes/woot/componentA/index.js

Thank you

Answer 1

It should be something like that... I didn't test, but I think it could represent a good starting point.

look at NormalModuleReplacementPlugin

// webpack.config.js
module.exports = env => {
  const theme = env.theme || null;

  const configs = Object.create(null);

  configs.plugins = [];

  if(theme) {
    const theming = new webpack.NormalModuleReplacementPlugin(
    /(.*)Components\/index/, (resource) => {

        resource.request = resource
          .request
          .replace(/Components\/index/, `Components\/${theme}\/index`);
      }
  );

    configs.plugins.push(theming);
  }

  return Promise
    .resolve(config)
  ;
}

// package.json
{
  "scripts": {
    "webpack": "webpack --config webpack.config.js"
  }
}

// cli
npm run webpack -- --env.theme=Dark