Can we make Webpack ignore the image files if not found on file system?

Question

Thanks in Advance.

I have the below webpack config,

{
        test: /\.scss$/,
        use: extractPlugin.extract({
          use: [
            { 
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            'sass-loader'
          ]
        })
      },
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'images/[name]-[hash].[ext]'
          }
        }],
      }

The CSS files contain the url() references to images that do not exist. I basically cannot cleanup the CSS as it was written by other team's developers. Webpack build fails with ModuleNotFoundError because of this. Can we make webpack ignore the image if it is not found.

There are like hundreds of such missing images. Cleanup of this CSS is not in my hand.

Any help is greatly appreciated

Answer 1

Yes, we can.

You need to use the url: false option of the css-loader:

{
   loader: "css-loader",
   options: {url: false},
},