网络包。主题回退

Question

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

所以假设我有下一个结构:

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

我做进口

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

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

为 webpack → app/componentA/index.js

为 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