(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 ...
随机推荐
- 51Nod 1058： N的阶乘的长度（斯特林公式）
1058 N的阶乘的长度 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Inp ...
- hdu2088
hdu2088 #include<stdio.h> #include<algorithm> using namespace std; ]; int main(){ ; ){ , ...
- day11 python学习 函数的建立，返回值，参数
函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行一系列的逻辑计算,如:发送邮件.计算出 [11,22,38,888,2]中的最大数等 ...
- 一、PowerDesigner概述(系统分析与建模)
PowerDesigner概述 PowerDesigner是Sybase公司推出的一个集成了企业架构,UML(统一建模语言)和数据库的CASE(计算机辅助软件工程)工具.它不仅可以用于系统设计和开发 ...
- Asp.net自定义控件系列（一）
最近看到公司某个网站中用到了自定义控件,咋一眼看去,不明白什么玩意, 网上一搜,好像确实不是几句话就能写出强大的自定义控件.好吧,作为一个码农,我决定从基本学起,写一个关于自定义控件学习过程系列. 当 ...
- 两数之和 Two Sum
给定一个整数数列,找出其中和为特定值的那两个数. 你可以假设每个输入都只会有一种答案,同样的元素不能被重用. 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 n ...
- 转【Oracle】一款非常好用的trace文件分析工具
[Oracle]一款非常好用的trace文件分析工具之一 北在南方 2016-04-14 11:23:58 浏览547 评论0 摘要: 介绍一款非常好用的10046分析工具--trca(Trace ...
- <<APUE>> 线程
一个进程在同一时刻只能做一件事情,线程可以把程序设计成在同一时刻能够做多件事情,每个线程处理各自独立的任务.线程包括了表示进程内执行环境必需的信息,包括进程中标识线程的线程ID.一组寄存器值.栈.调度 ...
- Hyperic Sigar API 举例
Hyperic HQ 是什么? Hyperic HQ 是一个开源的(General Public License,GPL授权)IT资源管理框架,让用户使用统一的界面来管理各种不同的IT资源的管理,Hy ...
- 求交错序列前N项和（15 分）
7-2 求交错序列前N项和(15 分) 本题要求编写程序,计算交错序列 1-2/3+3/5-4/7+5/9-6/11+... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格式: 在 ...