[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录:
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理.
安装file-loader: npm install file-loader --save-dev
在src目录下面新建一个文件夹( img ) 存储图片
一、demo3目录下面的index.html文件引入图片
1 <body> 2 <div id="app"></div> 3 <img src="./src/img/dm.jpg" alt=""> 4 </body>
二、style.css文件引入图片
1 html,body{ 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 background:url('../img/dm.jpg'); 7 } 8 ul,li { 9 list-style-type:none; 10 } 11 div { 12 transition: all ease 1s; 13 }
三、modal.ejs文件引入图片
1 <div class="modal"> 2 <div>这个组件的名字是:<%= name %></div> 3 <% for( var i = 0; i < arr.length; i++ ){ %> 4 <%= arr[i]%> 5 <% } %> 6 </div> 7 <img src="${ require('../img/dm.jpg') }" alt=""> 8 <img src="${ require('../img/dm.jpg') }" alt=""> 9 <img src="../img/dm.jpg" alt="">
注意:在模板中引入图片路径,如果是相对路径要这样引入${require(图片的相对路径)},否则打包路径会出现问题
四、webpack.config.js配置file-loader
1 var htmlWebpackPlugin = require('html-webpack-plugin'); 2 let path = require('path'); 3 module.exports = { 4 entry: './src/main.js', 5 output: { 6 path: __dirname + '/dist', 7 filename: 'js/[name].bundle.js', 8 }, 9 plugins: [ 10 new htmlWebpackPlugin({ 11 filename: 'index.html', 12 template: 'index.html', 13 inject: true 14 }) 15 ], 16 module: { 17 rules: [ 18 { 19 test: /\.js$/, 20 exclude: /(node_modules)/, 21 include: [ 22 path.resolve(__dirname, "src"), 23 ], 24 use: { 25 loader: 'babel-loader', 26 options: { 27 presets: ['env'] 28 } 29 } 30 }, 31 { 32 test: /\.css$/, 33 exclude: /(node_modules)/, 34 use: [ 35 'style-loader', { 36 loader : 'css-loader', 37 options : { 38 importLoaders : 1 39 }, 40 }, 41 'postcss-loader' 42 ] 43 }, 44 { 45 test: /\.less$/, 46 use: [ 47 { 48 loader: "style-loader" 49 }, { 50 loader: "css-loader" 51 }, { 52 loader: "less-loader" 53 } 54 ] 55 }, 56 { 57 test: /\.(html)$/, 58 use: { 59 loader: 'html-loader', 60 } 61 }, 62 { 63 test: /\.(ejs)$/, 64 use: { 65 loader: 'ejs-loader', 66 } 67 }, 68 { 69 test: /\.(png|gif|jpg|svg|jpeg)$/i, 70 use: { 71 loader: 'file-loader', 72 query : { 73 name : 'assets/[hash].[ext]' 74 } 75 } 76 } 77 ] 78 } 79 }
query部分的配置,是为打包的图片设置一个自定义的存储路径和文件名称。执行webpack打包,就可以看到打包之后的效果了
还有一种处理图片的loader,叫url-loader,把会把图片通过base64编码直接插入img标签后面,用法跟其他的loader处理都差不多
转载于:https://www.cnblogs.com/ghostwu/p/7508938.html
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法相关推荐
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让他 ...
最新文章
- [译]ASP.NET Core 2.0 机密配置项
- 【2012百度之星/资格赛】D:共同狂欢
- tcp长连接和短连接的区别_TCP --- 连接
- 机器学习中的相似性度量(转载)
- 步骤条自定义图片_用函数公式查找图片?我可没骗你
- 达观杯文本智能处理(2)
- 从获得字符串中获取数字
- 一本经典的程序员必看书籍————人月神话
- canvas对象arcTo函数的使用-遁地龙卷风
- SetWindowsHookEx全局钩子
- HikariCP连接池
- 点击选择-图片添加对号(单选)
- 浏览器主页被修改的解决方案
- Layui页面元素之导航
- SQL Server 2005全文检索技术在网站上的应用实录
- 高斯滤波及高斯卷积核C++实现
- MYSQL报1265和1366错误
- k8s之滚动更新及pod流量分析
- 百得利控股拟赴港上市:经营业绩下滑,实控人周小波为德国籍华人
- XP完美模拟Vista全攻略
热门文章
- java bmp_JAVA实现对BMP图片的读取
- 负数显示红字html语言,需要将单元格内的负数显示为红色且不带负号显示两位小数的格式代码是下面哪一种A、 0.00;[红色...
- python识别简单训练模型_Python3+OpenCV实现简单交通标志识别
- KubeMeet 直播 | 现场直击大规模集群、混合环境下的云原生应用交付难题
- 基于 RocketMQ 的基金数字化陪伴体系的架构实践
- OpenYurt 开箱测评 | 一键让原生 K8s 集群具备边缘计算能力
- 临河天气预报软件测试,临河天气预报15天
- 窄行打印纸打印机规格_电脑打印纸的尺寸和打印机纸张规格的设置
- python预测随机数据_随机森林预测
- 【公开课】“有三说深度学习”上线