的WebPack.主题后退

Question

是否可以使用webpack解决主题路径作为后备？

所以我想说我有下一个结构:

    app/
    ??? componentA/
    ?   ?? index.js
    ?
    ??? themes/
        ??? woot/
            ??? componentA/
                ??? index.js

而且我做进口

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

然后根据构建我想接下来:

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

谢谢

Answer 1

应该是这样的......我没有测试，但我认为它可以代表一个很好的起点。

看着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