Webpack. Theming Fallback

Question

Ist es möglich, Theming-Pfad als Fallback mit Webpack zu lösen?

Also lassen Sie uns sagen, dass ich nächste Struktur haben:

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

Und ich importieren

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

Dann auf Build je ich als nächstes empfangen möchten:

1. für webpack → app/componentA/index.js
2. für THEME="woot" webpack → app/themes/woot/componentA/index.js

Danke

Answer 1

Es sollte etwas sein, so ... ich nicht testen habe, aber ich denke, es ist ein guter Ausgangspunkt darstellen.

Blick auf 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