java中css引用图片,html中写的css样式引用图片webpack如何打包

背景：

我是通过在html中写入 标签来写样式的，通过配置 webpack url-loader，发现如果是css文件中的引用的图片或者html中img引用的图片都可以走url-loader，压缩成base64或打包出对应images文件夹，但是 标签 中的引用的图片还是原来的路径，既不会生成images文件夹，也不会改为base64，请问下大家有什么办法可以让这种格式也支持？

样式写法如下：

div{

background: url("../../assets/images/icon.png");

}

打包后：

div{

background: url("../../assets/images/icon.png");

}

webpack配置：rules: [

{

test: /.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader',

{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}},

]

},

{

test: /.less$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader?importLoaders=1',

{loader: 'postcss-loader', options: {plugins: [require("autoprefixer")("last 100 versions")]}},

'less-loader'

]

},

{

test: /.(png|jpe?g|gif|svg)(?.*)?$/,

use: [

{

loader: 'url-loader',

options: {

limit: 1024 * 5,

name: 'images/[name].[ext]',

fallback: 'file-loader'

}

},

{

loader: 'image-webpack-loader',// 压缩图片

options: {

bypassOnDebug: true,

}

},

]

},

{

test: /.(mp4|webm|ogg|mp3|wav|flac|aac|swf|mov)(?.*)?$/,

use: [

{

loader: 'file-loader',

options: {

name: 'media/[name].[hash:7].[ext]',

}

},

]

},

{

test: /.js$/,

exclude: [

/node_modules/,

path.resolve(__dirname, "assets/javascripts/swiper.min.js"),

],

use: {

loader: "babel-loader"

}

},

{

test: /.html$/,

use: [

{

loader: "html-loader",

options: {

minimize: true,// 加载器切换到优化模式，启用压缩。

caseSensitive: true // 以区分大小写的方式处理属性(对于自定义HTML标记很有用)，即禁止html标签全部转为小写

}

}

]