定位谬误
我的项目应用webpack4进行编译，打包后的款式中应用url办法指定的背景图片不可能失常显示
.bgurl{ background-image: url('/images/abc.jpeg')}上述款式在webpack中编译出错，配置如下
// stylus[ loader: MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 2, } }, 'postcss-loader', 'stylus-loader']始终爆图片未找到的谬误，依照网上找到的解决方案，补全MiniCssExtractPlugin配置项publicPath，但仍然出错。看来问题不是出在MiniCssExtractPlugin。后通过认真排查。定位到谬误其实是css-loader编译时爆进去的。
去npm上找到css-loader配置，找到如下内容
| 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('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')属性url默认为true，此属性默认强行解释款式中应用url定位的图片，默认寻址该图片地址(与css同源地址)，因同源地址图片不存在(理论图片存在于另外的目录)，造成编译谬误。
修改webpack配置
[ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '//localhost:3000/', } }, { loader: 'css-loader', options: { importLoaders: 2, url: false } }, 'postcss-loader', 'stylus-loader']publicPath
此项配置能够共用webpack.output配置，但倡议在MiniCssExtractPlugin.loader中独立设置。有以下两个起因
- css的url(...)中的图片个别是相对路径寻址图片
- 运维会提供动态资源服务器，图片有专属的域名地址
url
将css-loader的配置url设为false，使css-loader不解析款式中url(...)的图片地址，放弃原有属性
至此，webpack打包款式url()背景图片问题得以解决，心愿对大家有帮忙