打包图片资源

优质

小牛编辑

131浏览

2023-12-01

一、打包图片的核心配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less
                    'less-loader'
                ]
            },
            {
                //问题：默认处理不了 html 中的 img 图片
                //处理图片资源
                test: /\.(jpg|png|gif)$/,
                //使用一个loader
                //下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    //图片大小小于8kb,就会被base64处理
                    //优点:减少请求数量(减轻服务器压力)
                    //缺点:图片体积会更大(文件请求速度更慢)
                    limit: 8 * 1024,
                    //问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
                    //解析时会出问题: [object Module]
                    //解决:关闭url-loader的es6模块化,使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名
                    //[hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]',
                    //设置输出目录，将打包的图片资源放到imgs文件夹
                    outputPath: './imgs'
                }
            },
            {
                test: /\.html$/,
                //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                loader: 'html-loader',
                options:
                {
                    //默认情况下,生成使用ES块语法的Js模块
                    //问题:生成的图片显示错误
                    //解决: esModule改为false
                    esModule: false,
                },
            }
        ]
    },

二、样式文件中使用图片(less场景，css 类似)

#box1{
    width: 100px;
    height: 100px;
    background-image: url('./logo1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#box2{
    width: 200px;
    height: 200px;
    background-image: url('./logo2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#box3{
    width: 300px;
    height: 300px;
    background-image: url('./logo3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

2.1、样式文件中使用图片时用到的配置

// loader的配置
    module: {
        rules: [
            //打包 css 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
            //打包less 文件的详细loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader进行处理
                use: [
                    // use数组中loader执行顺序:从右到左,从下到上依次执行
                    //创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less-loader和less
                    'less-loader'
                ]
            },
            {
                //问题：默认处理不了 html 中的 img 图片
                //处理图片资源
                test: /\.(jpg|png|gif)$/,
                //使用一个loader
                //下载url-loader file-loader
                loader: 'url-loader',
                options: {
                    //图片大小小于8kb,就会被base64处理
                    //优点:减少请求数量(减轻服务器压力)
                    //缺点:图片体积会更大(文件请求速度更慢)
                    limit: 8 * 1024,
                    //问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
                    //解析时会出问题: [object Module]
                    //解决:关闭url-loader的es6模块化,使用commonjs解析
                    esModule: false,
                    // 给图片进行重命名
                    //[hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name: '[hash:10].[ext]'
                }
            }

        ]
    },

2.2、安装对应 loader

# 安装 url-loader 和 file-loader 
> npm i url-loader file-loader  -D

结论

1、先配置 css 或 less 文件的打包配置
2、在配置图片打包配置，配置使用 url-loader 和 file-loader
3、为了兼容 html 中的图片打包配置需要关闭url-loader的es6模块化,使用commonjs解析防止解析完后出现解析时会出问题: [object Module]

三、html中使用图片

<!-- 文件路径 ./src/index.htmnl -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 学习</title>
</head>
<body>
    <h1 id="title">hello webpack</h1>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <img src="./logo2.png" alt="html中引用图片" />
</body>
</html>

3.1、html中使用图片时用到的配置

// loader的配置
    module: {
        rules: [
            {
                test: /\.html$/,
                //处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
                loader: 'html-loader',
                options:
                {
                    //默认情况下,生成使用ES块语法的Js模块
                    //问题:生成的图片显示错误
                    //解决: esModule改为false
                    esModule: false,
                },
            }
        ]
    },

3.2、安装对应 loader

# 在安装 url-loader 和 file-loader 的基础上安装 html-loader
> npm i html-loader -D

结论

1、配置图片打包配置，配置使用 url-loader 、file-loader 和 html-loader
2、为了兼容 html 中的图片打包配置需要关闭html-loader的es6模块化,防止生成的图片显示错误

四、自定义打包图片名称和路径

// 注意loader中以下的配置
        ……
        // 给图片进行重命名
        //[hash:10]取图片的hash的前10位
        // [ext]取文件原来扩展名
        name: '[hash:10].[ext]',
        //设置输出目录，将打包的图片资源放到imgs文件夹
        outputPath: './imgs'
        ……

项目中使用 logo1.png、logo2.png、logo3.png 等3张图片

最终显示效果如下: