webpack模块测试正则表达式不起作用答案

【问题标题】：webpack module test the regexp not workwebpack模块测试正则表达式不起作用
【发布时间】：2018-07-10 08:14:09
【问题描述】：

  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)/，它将起作用。

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

【问题讨论】：

相当困难的正则表达式...你可以试试这个 /logo3 吗？\.png$/ 也不要使用 ^ 因为文件名包含资源路径（即 user/app/src/logo.png）
是的，我忘记了资源的路径。如果我使用 ^，测试将是错误的。也许你可以发布一个答案，这样我就可以结束我的问题了。

标签： javascript webpack webpack-4

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这是一个使用 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,
            },
        },

见：

【讨论】：

【解决方案3】：

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

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

【讨论】：