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]'
          }
        }]
      }
    ]
  }

This config can't let logo.png and logo3.png loaded by file-loader if I change the regexp to /(logo.png|logo3.png)/ it will be work.

Why does the old regexp not work?

  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]'
          }
        }]
      }
    ]
  }

This config can't let logo.png and logo3.png loaded by file-loader if I change the regexp to /(logo.png|logo3.png)/ it will be work.

Why does the old regexp not work?

• javascript
• webpack
• webpack-4

• quite hard regex... can you try this /logo3?\.png$/ Also do not use ^ because file name includes path to resource (i.e. user/app/src/logo.png) – Ilia Commented Jul 10, 2018 at 8:58
• Yes, I forgot the path of the resource. If I use ^, the test will be false. Maybe you can post an answer, so I can close my question. – blastz Commented Jul 10, 2018 at 9:12

3 Answers 3

First of all, your regex actually work!
you can head over here for testing you regex pattern online. This is a pretty good page for testing your regex https://regex101./

And secondly, just my though, that maybe your second rule have no test config init.
You could try to add test: /\.(jpg|png)$/ in your second rule config

IMO you are using ^ which means the filename should strictly start from logo.png and internally webpack might have appended the path like /path/to/logo.png and your condition to strictly begin with logo.png fails and hence your file doesn't get included.

when you removed ^ then /path/to/logo.png is valid according to /(logo.png|logo3.png)/

Here's an example using 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,
            },
        },

See:

• https://webpack.js/configuration/module/#ruleexclude
• https://webpack.js/configuration/module/#condition