c/c++语言开发共享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，查看效果。

c/c++开发分享webpack这样打包图片资源，你会吗？webpack打包图片资源地址：https://blog.csdn.net/Kindergarten_Sir/article/details/110238877