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

背景:
我是通过在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标签全部转为小写
 }
            }
        ]
阅读 1.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题