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
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/c-cdevelopment/596567.html