Vue

VUE3之WebPack资源

file-loader图片打包css样式

在我使用的webpack版本中,不添加file-loader就可以正常显示图片,并在输出文件夹下有显示的图片,然而使用了file-loader之后反而生成了不可预览的图片(浏览器和vscode都无法显示)。

安装file-loader:

npm install file-loader -D

css文件

.image-bg{
    background-image: url("../img/zero-Two-750x422.jpg");
    /* background-size: contain; */
    width: 750px;
    height: 422px;
}

webpack.config.js:

    module: {
        rules: [     
            // ,{
            //     test: /\.(jpe?g|png|gif|svg)$/,
            //     use: "file-loader"
            // }
        ]
    }
image 8

file-loader图片打包img元素

使用file-loader可以将一个图片当作一个模块被引入,然后赋值给一个img元素的src属性。这样做可以解决相对路径的问题:



import zerotwo from '../img/zerotwo.jpg'

// 设置img元素的src
const imgEl=document.createElement("img");
imgEl.src=zerotwo;


document.body.appendChild(imgEl);

图片打包的命名规则:

在使用file-loader时添加参数以规定命名规则和输出位置:

            ,{
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: "file-loader",
                    options:{
                        // outputPath: "img",
                        name: "img/[name]_[hash:6].[ext]"
                    }
                }
            }

方括号表示占位符。

image 9

url-loader图片打包

url-loader是将图片直接用base64编码插入到最后的bundle.js中,从而减少额外向服务器请求图片的次数。通过options的limit选项来限制最大执行编码的图片大小。

            ,{
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: "url-loader",
                    options:{
                        outputPath: "img",
                        name: "[name]_[hash:6].[ext]",
                        limit: 50 *1024
                    }
                }
            }

通过webpack的asset module type来实现上述图片打包功能

使用asset可以解决之前background-image不显示的问题。

asset/resource实现了file-loader的功能;asset/inline实现了url-loader的功能;直接使用asset可以通过参数来决定使用哪种,如下:

            ,{
                test: /\.(jpe?g|png|gif|svg)$/,
                type: "asset",
                generator: {
                    filename: "img/[name]_[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition:{
                        maxSize: 50*1024
                    }
                }
            }

字体打包属于完全未知范畴,暂时跳过

发表评论