Question

我需要能够有条件地构建产品，它是为众多客户量身定制的单一代码库，并且存在一个用例，即某个组件或一组组件仅需要针对单个客户端实例存在。

我发现很多webpack加载程序确实可以解决这个问题，但是它们依赖于从react DOM中剥离出来的注释，而且我在webpack中所知的所有配置选项都无法成功获取代码这一点

  {
    enforce: 'pre',
    test: /\.(tsx?|js)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: "webpack-remove-block-loader",
        options: {
          active: true, // Boolean. loader on or off
          start: "{/*", // String.
          end: "*/}", // String.
          blocks: ['client'+argv.entryCode], // Array.
        }
      }
    ]
  },

有没有一种我不打算在纯tsx上运行此方法，或者可能以某种方式保留所需注释的方法？

另外，也可以通过其他任何方式来管理类似的东西。在大多数情况下，它是特定于客户端的组件，但也可能需要排除某些辅助功能，以上的webpack加载程序应该可以完美地针对这些辅助功能进行工作。

Answer 1

只需有条件地添加整个规则即可。

类似这样的东西：

if (active) {
  config.module.rules.push({
    // ...the rule you posted in your question
  })
}

或

rules: [
  active && {
    // ...the rule you posted in your question
  },
]

寻求在构建时使用Webpack动态排除代码块形成捆绑

1 个答案: