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"
            // }
        ]
    }

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]"
                    }
                }
            }

方括号表示占位符。

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
                    }
                }
            }

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