(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 ...
随机推荐
- Linux Shell查看物理CPU个数、核数、逻辑CPU个数
Linux Shell常用命令: ====================================== # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理C ...
- 原型设计 Axure8.1 软件注册码
用户名:Koshy 注册码: wTADPqxn3KChzJxLmUr5jTTitCgsfRkftQQ1yIG9HmK83MYSm7GPxLREGn+Ii6xY
- 【知识笔记】Debugging
一.启动调试出现 无法启动程序 当前状态中是非法 VS工具--选项--调试--常规--启用asp.net的JavaScript调试(chrome和ie)去掉勾选 二.web.config中<cu ...
- 【Quartz】Quartz的数据库表
select * from test.QRTZ_TRIGGERS 触发器表 select * from QRTZ_PAUSED_TRIGGER_GRPS 暂停的分组任务表 select * from ...
- tomcat源码阅读之StandardContext
Context实例表示一个具体的web应用程序,其中包含一个或者多个Wrapper实例,每个Wrapper表示一个具体的servlet定义.StandardContext类是Context接口的标准实 ...
- Huawei E1750 Asterisk
http://wiki.e1550.mobi/doku.php?id=installation https://wiki.asterisk.org/wiki/display/AST/Mobile+Ch ...
- Charles ：mac上的手机代理
能在手机访问电脑上的网页. 配置: 下载 Charles,选中 Proxy => macOS Proxy Proxy => Proxy Setting 配置上端口 手机无线手动代理,配置上 ...
- maven 指定 jdk 版本
方法1:直接修改 本地 settings.xml 文件 <profiles> </profiles> 之间加入 下面的 <profile> <id> ...
- 我的主机是win 7 虚拟机是vmware，solaris10连接主机
进入主机Control Panel—Administrative Tool—Services,打开服务Vmware DHCP Servise和Vmware NAT Service,启动后虚拟机上网正常 ...
- Angular 4.0 环境搭建
1.安装node 2.angular cli安装 sudo npm install -g @angular/cli 3. 使用ng -v 查看安装结果 4. 创建项目 ng new helloworl ...