2017-08-20 9 views
8

वेबपैक के साथ फ़ॉलबैक के रूप में थीमिंग पथ को हल करना संभव है?वेबपैक। थॉमिंग फ़ॉलबैक

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

और मैं

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

फिर निर्माण के आधार पर आयात मैं अगले प्राप्त करना चाहते हैं:

    webpackapp/componentA/index.js के लिए
  1. तो चलो कहते हैं कि मैं अगले संरचना है चलो

  2. के लिए→ app/themes/woot/componentA/index.js

धन्यवाद

+0

पर

देखो जहां संघ थीम = "woot" परिभाषित किया गया है? वेबपैक कॉन्फ़िगरेशन या वेब स्क्रिप्ट कॉन्फ़िगरेशन वाली कुछ स्क्रिप्ट में? – BoxerBucks

+0

@ बॉकरबक्स वेबपैक क्लाइ कॉल के तहत ग्लोबल एनवी वैरिएबल के रूप में –

उत्तर

3

ऐसा लगता है कि ... मैं का परीक्षण नहीं किया था कुछ होना चाहिए, लेकिन मुझे लगता है कि यह एक अच्छा प्रारंभिक बिंदु का प्रतिनिधित्व कर सकते हैं। 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