(10/24) 图片跳坑大战--处理html中的图片
补充，在前面的服务启动执行命令中，我们在package.json中的配置信息为：
"scripts": {
"server": "webpack-dev-server",
},
该种方式在启动服务后还需自己访问相关url，这很不友好。此处我们新增一些配置，保证在我们启动服务后自动访问url并渲染，配置如下：
"scripts": {
"server": "webpack-dev-server --open",
},
这样就实现了服务启动浏览器也会自动打开。
正文：
在前端开发中，我们常用img标签来引入图片,这样webpack在打包时又得做一些特殊处理，此处我们通过一个插件html-withimg-loader 来处理我们在html 中引入图片的问题。
处理html中的图片
1.新增一张图片
在src/images目录下新增一张图片，作为等会引入到html文件中图片，此处我的图片为wfbin.png。
2.引入图片
在src/index.html中引入：
<div>
<img src="data:images/wfbin.png"/>
</div>
3. 插件安装
使用npm进行安装，若失败则采用cnpm进行安装。
npm install html-withimg-loader --save-dev
4.配置loader
在webpack.config.js文件中的module属性中进行配置：
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
5.打包
使用webpack进行打包，我们的图片被进行了很好的打包。
6.启动服务
运行命令npm run server命令，服务被启动，浏览器自动打开，并进行了渲染，如下：
npm run server
渲染效果：
记：到此完成了webpack打包过程中图片的相关处理。
本节源码：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div>
<img src="data:images/wfbin.png"/></div>
<div id="img"></div>
<div id="title"></div>
</body>
</html>
src/index.css:
body{
background-color: #018eea;
color: red;
font-size: 32px;
text-align: center;
}
#img{
background-image: url(../images/webapck.jpg);
width:271px;
height:285px;
}
webpack.config.js:
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
publicPath:"http://localhost:1818/"
}
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js',
//这里我们又引入了一个入口文件
entry2:'./src/entry2.js',
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js',
publicPath: website.publicPath
},
//模块：例如解读CSS,图片如何转换，压缩
module:{
rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.(png|jpg|gif)/,
use:[{
loader:'url-loader',
options:{
limit:50,
outputPath:'images/'//图片打包到images下
}
}
]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
]
},
//插件，用于生产模版和各项功能
plugins:[
// new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("css/index.css")
],
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'dist'), //绝对路径
host:'localhost',
compress:true,
port:1818
}
}
entry.js://入口文件
import css from './css/index.css'
document.getElementById('title').innerHTML='Hello Webpack';
(10/24) 图片跳坑大战--处理html中的图片的更多相关文章
- (8/24) 图片跳坑大战--css中的图片处理
前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...
- (9/24) 图片跳坑大战--css分离与图片路径处理
前言: 在上一节当中,我们把小图片打包成Base64格式(打包到了js当中).我们也算是对webpack对图片的打包有个基本了解. 本节我们准备把css从JavasScript代码中分离出来,这会遇到 ...
- Android之ListView异步加载图片且仅显示可见子项中的图片
折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整 ...
- JAVA-替换html中图片的路径-从html代码中提取图片路径并下载（完整版）
transHtml方法实现提取网络图片中得图片路径,将其重新下载到本地,并替换html中原来得路径 package com.googosoft.until; import java.io.Buffer ...
- 小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)
工作之余,想着帮老妈开发个小程序,一是宣传一下她的业务,二是学习使用一下微信小程序的开发,哈哈.在此过程中遇到了navigator跳转的问题,最终还是成功解决了,下面就记录下来,并做个系列总结以作记录 ...
- android 根据SD卡中图片路径读取并显示SD中的图片——源代码
package com.guo; import java.io.File; import android.app.Activity; import android.graphics.Bitmap; i ...
- 利用百度AI OCR图片识别，Java实现PDF中的图片转换成文字
序言:我们在读一些PDF版书籍的时候,如果PDF中不是图片,做起读书笔记的还好:如果PDF中的是图片的话,根本无法编辑,做起笔记来,还是很痛苦的.我是遇到过了.我们搞技术的,当然得自己学着解决现在的痛 ...
- 两百条微信小程序跳坑指南（不定时更新）
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- HTML学习笔记——图片显示、图片跳转、图片相对路径
1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
随机推荐
- HDU 4666 最远曼哈顿距离
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4666 关于最远曼哈顿距离的介绍: http://blog.csdn.net/taozifish/ar ...
- [Boolan-C++学习笔记]第二周整理
1.对于String类型的类(含有指针) 其中的指针成员能够灵活的申请存储空间,但指针操作又带来内存泄漏的风险,变更指针的操作需要尤为谨慎. 要点在于写好BigThree 构造函数 { 完成成员初始化 ...
- 《DSP using MATLAB》 Problem 4.9
代码: %% ---------------------------------------------------------------------------- %% Output Info a ...
- Django 数据库操作进阶F和Q操作
Model中的F F 的操作通常的应用场景在于:公司对于每个员工,都涨500的工资.这个时候F就可以作为查询条件 1 2 3 from django.db.models import F models ...
- juc并发工具类之CountDownLatch闭锁
import java.util.concurrent.CountDownLatch; /** * 闭锁: 在进行某些运算时, 只有其他所有线程的运算全部完成,当前运算才继续执行(程序流中加了一道栅栏 ...
- JS 的预编译和执行顺序
脚本执行js引擎做的工作: 语法分析 预编译 解释执行
- requestAnimationFrame 提高动画性能的原因
与setTimeout相比,requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机.具体一点讲,如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次,如果刷新 ...
- windows 安装操作系统时切换分区表格式
在出现分区管理界面时,按下shift+F10呼出命令行,输入diskpart 后尝试如下命令将磁盘分区表手动转换到MBR. list disk ---- 显示当前磁盘列表 select disk x ...
- Spring Cloud 入门 之 Hystrix 篇（四）
原文地址:Spring Cloud 入门 之 Hystrix 篇(四) 博客地址:http://www.extlight.com 一.前言 在微服务应用中,服务存在一定的依赖关系,如果某个目标服务调用 ...
- Win7 搭建pptpvpn服务器方法
打开网络与共享中心 选择更改适配器设置 选择菜单文件选项(若无菜单栏,可以按一下alt键就会显示出来的) 选择新建传入链接 选择需要哪些用户可以访问vpn服务器,把勾搭上,点击下一步 注意此处的通过i ...