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

发布于 2022-09-12 22:38:18 字数 2561 浏览 10 评论 0

背景：
我是通过在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标签全部转为小写
 }
            }
        ]

分享到QQ

分享到微博