Webpack solves the problem of style URL () background image

Positioning error

The project is compiled with webpack4, and the background image specified by URL method in the packaged style cannot be displayed normally

.bgurl{
  background-image: url('/images/abc.jpeg')
}

Error in compiling the above style in webpack. The configuration is as follows

// stylus
[
  loader: MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
    }
  },
  'postcss-loader',
  'stylus-loader'
]

Always explode pictures not found error, according to the solution found online, completeMiniCssExtractPluginConfiguration itempublicPath, but it still goes wrong. It seems that the problem is notMiniCssExtractPlugin. After careful investigation. It’s a mistakecss-loaderIt exploded at compile time.

Find it on NPMcss-loaderConfiguration, find the following

Name	Type	Default	Description
url	{Boolean\	Function}	true	Enables/Disables url/image-set functions handling

url
Type: Boolean|Function Default: true

Enables/Disables url/image-set functions handling. Control url() resolving. Absolute URLs are not resolving.

Examples resolutions:

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('https://imgs.developpaper.com/imgs/2112.png') => require('https://imgs.developpaper.com/imgs/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

attributeurlThe default value is true. By default, this attribute forcibly interprets the image located by URL in the style, and addresses the image address by default (the same source address as CSS). Because the same source address image does not exist (the actual image exists in another directory), the compilation error is caused.

Fix webpack configuration

[
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '//localhost:3000/', 
    }
  },
  {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
      url: false 
    }
  },
  'postcss-loader',
  'stylus-loader'
]

publicPath
This configuration can be shared webpack.output Configuration, but it is recommended thatMiniCssExtractPlugin.loaderIt can be set independently in. There are two reasons

1. The pictures in the URL (…) of CSS are generally relative path addressing pictures
2. Operation and maintenance will provide static resource server with exclusive domain name address

url
takecss-loaderThe configuration URL of is set to false, so that the CSS loader does not parse the image address of URL (…) in the style and keeps the original attribute

So far, the background image problem of webpack packaging style URL () has been solved, and I hope it can help you

Open source project