webpack这样打包图片资源，你会吗？webpack打包图片资源

webpack打包demo，git地址：https://github.com/OnionMister/webpack-demo.git

打包图片资源分为两种，一种是css、js等中的图片打包，另一种是img标签的图片打包

一、css、js等中的图片打包

这种打包使用的是url-loader，url-loader依赖于file-loader，安装命令如下：

cnpm install url-loader file-loader -D

二、img标签的图片打包

这种打包使用的是html-loader ，安装命令如下：

cnpm install html-loader -D

三、目录结构

四、index.html的body代码

 	<div class="bg1">less文件中的背景图</div>
    <div class="bg2">less文件中的背景图</div>
    <div class="bg3">less文件中的背景图</div>
    <img src="./imgs/ym.jpg" title='我是img标签' alt="英明">
    <div class="bg4">鼠标图小于10kB，是base64编码,且是通过js添加的背景图</div>

五、index.less代码

.bg1 {
    width: 200px;
    height: 100px;
    background-size: 100% 100%;
    background-image: url(./imgs/hp.jpg);
}
.bg2 {
    width: 300px;
    height: 150px;
    background-size: 100% 100%;
    background-image: url(./imgs/qz.png);
}
.bg3 {
    width: 400px;
    height: 200px;
    background-size: 100% 100%;
    background-image: url(./imgs/rz.jpg);
}
.bg4 {
    width: 300px;
    height: 300px;
    background-size: 100% 100%;
}
img {
    width: 500px;
    height: auto;
}

六、index.js的代码

需要主要js中的图片一定要导入，如使用require(路径)

// 导入样式
import './index.less';
const bgImg = require('./imgs/small.jpg'); // 这里一定要导入图片，否则打包不了

function test() {
    console.log("webpack打包图片资源");
}
test();
var bg4 = document.getElementsByClassName("bg4")[0];
bg4.style.backgroundImage = `url(${bgImg})`;

七、webpack.config.js代码

/**
 * 使用url-loader对样式中的html进行处理，url-loader依赖于file-loader
 * 下载：url-loader 和 file-loader
 * 使用html-loader对html中的img标签进行处理
 * 下载：html-loader
 */
const {
    resolve
} = require('path'); // 使用resolve()处理绝路径
// html-webpack-plugin版本4 和 webpack5有兼容性问题，报错查看：https://blog.csdn.net/Kindergarten_Sir/article/details/110083041
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 打包html文件
module.exports = {
    // 入口文件
    entry: "/src/index.js",
    output: {
        // 输出文件名
        filename: "bundle.js",
        // 输出路径，__dirname是当前文件的绝对路径，输出到绝对路径下的dist文件夹下
        path: resolve(__dirname, 'dist'),
        // 给打包后资源引入的路径前缀，静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
        publicPath: "./"
    },
    module: {
        rules: [
            // loader配置
            {
                // 匹配以样式结尾的文件
                test: /\.less$/,
                // use中的多个loader是自底向上或自右向左运行的
                use: [
                    // 在index.html文件的head中创建style标签，并将js中的样式字符串插入
                    'style-loader',
                    // 将css文件变成common.js的字符串加入到输出的js中
                    'css-loader',
                    // less-loader将less译成css
                    // 需要安装less和less-loader
                    'less-loader'
                ]
            },
            {
                // 对样式中引入的图片文件进行转译，不处理img标签
                test: /\.(jpg|png|gif)$/,
                // 下载：url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片小于10kB，会将图片传换成base64编码处理，
                    // 目的是为了将小图转为编码减少请求数量减轻服务器压力，
                    // 会导致图片体积增大，即base64编码比原图体积大（建议对小于12kB的图做编码处理，大图不处理）
                    limit: 10 * 1024,
                    // 关闭es6模块化处理，避免与html-loader的common.js规范冲突，发生冲突会导致路径变成“[object Module]”
                    // 新版本已经没有这个问题了 可以不关闭。
                    esModule: false,
                    // 默认图片命名为chunk的hash值，太长了
                    // [hash:10]为hash值前十位，[ext]表示文件原有扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                // 对img标签路径进行处理
                test: /\.html$/,
                // html-loader使用common.js规范对img标签路径进行处理
                loader: 'html-loader'
            }
        ]
    },
    // 插件配置
    plugins: [
        // HtmlwebpackPlugin默认功能为创建空的html（body为空）并引入打包输出的js文件
        // template配置是将指定的html文件的body内容加入到创建的html文件中
        // html-webpack-plugin版本4 和 webpack5有兼容性问题，报错查看：https://blog.csdn.net/Kindergarten_Sir/article/details/110083041
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: "development", // 开发环境
    // mode: "production", // 生产环境
}

八、安装webpack和webpack-cli并打包

// 安装
cnpm insatll webpack webpack-cli -D
// 打包命令
webpack

九、打包后的目录

可运行打包后的html，查看效果。

本文地址：https://blog.csdn.net/Kindergarten_Sir/article/details/110238877