Webpack. Theming fallback

Question

Czy można rozwiązać ścieżkę tematyczną jako awarię z pakietem sieci Web?

Więc powiedzmy, że mam kolejną strukturę:

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

I robię importować

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

Następnie w zależności od budowy Chcę otrzymywać dalej:

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

Dziękuję

Answer 1

Powinno być coś takiego ... Nie testowałem, ale myślę, że może to stanowić dobry punkt wyjścia.

spojrzenie na 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