Question

  module: {
    rules: [
      {
        test: /\.(jpg|png)$/,
        exclude: /(^logo\.png$|^logo3\.png$)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 15 * 1024,
            name: "imgs/[name].[ext]"
          }
        }]
      },
      {
        include: /(^logo\.png$|^logo3\.png$)/,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'imgs/[name].[ext]'
          }
        }]
      }
    ]
  }

此配置无法让logo.png加载logo3.png和file-loader 如果我将正则表达式更改为/(logo.png|logo3.png)/，它将可以正常工作。

为什么旧的正则表达式不起作用？

Answer 1

首先，您的正则表达式可以正常工作！
您可以前往此处在线测试您的正则表达式模式。这是测试您的正则表达式的一个很好的页面 https://regex101.com/

其次，尽管如此，也许您的第二条规则没有测试配置初始化。
您可以尝试在第二个规则配置中添加test: /\.(jpg|png)$/

Answer 2

IMO，您正在使用^，这意味着文件名应严格从logo.png开始，并且内部webpack可能已附加了路径/path/to/logo.png，而您的条件to strictly begin with logo.png失败了，因此您的文件不包含在内。

当您删除^时，/path/to/logo.png根据/(logo.png|logo3.png)/是有效的

Answer 3

以下是使用webpack 4的示例：

        {
            test: /.(ts|tsx)?$/,
            loader: 'ts-loader',
            exclude: {
                or: [
                    function(item){
                        console.log('regex match', item)
                        return item.match(/(.*)stories.tsx/)
                    },
                    path.resolve(__dirname, 'frontend/@types'),
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'frontend/data'),
                ],
            },
            include: [
                path.resolve(__dirname, 'frontend'),
            ],
            options: {
                // disable type checker - we will use it in fork plugin
                transpileOnly: true,
            },
        },

请参阅：https://webpack.js.org/configuration/module/#ruleexclude

webpack模块测试regexp不起作用

3 个答案: