极客观点
项目管理
HarmonyOS
背景：
我是通过在html中写入 <style></style> 标签来写样式的，通过配置 webpack url-loader，发现如果是css文件中的引用的图片或者html中img引用的图片都可以走url-loader，压缩成base64或打包出对应images文件夹，但是<style></style> 标签 中的引用的图片还是原来的路径，既不会生成images文件夹，也不会改为base64，请问下大家有什么办法可以让这种格式也支持？
样式写法如下：
<head>
<style>
div{
background: url("../../assets/images/icon.png");
}
</style>
</head>
<body>
<img src="../../assets/images/icon_1.png" alt="">
</body>打包后：
<head>
<style>
div{
background: url("../../assets/images/icon.png");
}
</style>
</head>
<body>
<img src="base64编码格式图片" alt="">
</body>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标签全部转为小写
}
}
]