Question

是否可以使用webpack将主题路径解决为回退？

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

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

我确实导入了

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

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

for webpack→app/componentA/index.js
for 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

的WebPack。主题后退

1 个答案: