补充,在前面的服务启动执行命令中,我们在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中的图片的更多相关文章

  1. (8/24) 图片跳坑大战--css中的图片处理

    前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码.上一节 CSS中的图片处理 1.新建images文件夹 在src目录下新建一个images文 ...

  2. (9/24) 图片跳坑大战--css分离与图片路径处理

    前言: 在上一节当中,我们把小图片打包成Base64格式(打包到了js当中).我们也算是对webpack对图片的打包有个基本了解. 本节我们准备把css从JavasScript代码中分离出来,这会遇到 ...

  3. Android之ListView异步加载图片且仅显示可见子项中的图片

    折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整 ...

  4. JAVA-替换html中图片的路径-从html代码中提取图片路径并下载(完整版)

    transHtml方法实现提取网络图片中得图片路径,将其重新下载到本地,并替换html中原来得路径 package com.googosoft.until; import java.io.Buffer ...

  5. 小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)

    工作之余,想着帮老妈开发个小程序,一是宣传一下她的业务,二是学习使用一下微信小程序的开发,哈哈.在此过程中遇到了navigator跳转的问题,最终还是成功解决了,下面就记录下来,并做个系列总结以作记录 ...

  6. android 根据SD卡中图片路径读取并显示SD中的图片——源代码

    package com.guo; import java.io.File; import android.app.Activity; import android.graphics.Bitmap; i ...

  7. 利用百度AI OCR图片识别,Java实现PDF中的图片转换成文字

    序言:我们在读一些PDF版书籍的时候,如果PDF中不是图片,做起读书笔记的还好:如果PDF中的是图片的话,根本无法编辑,做起笔记来,还是很痛苦的.我是遇到过了.我们搞技术的,当然得自己学着解决现在的痛 ...

  8. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

  9. HTML学习笔记——图片显示、图片跳转、图片相对路径

    1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. LOJ2538. 「PKUWC2018」Slay the Spire【组合数学】

    LINK 思路 首先因为式子后面把方案数乘上了 所以其实只用输出所有方案的攻击力总和 然后很显然可以用强化牌就尽量用 因为每次强化至少把下面的牌翻一倍,肯定是更优的 然后就只有两种情况 强化牌数量少于 ...

  2. 东北林业大学第12届ACM(打表)

    东北林业大学第12届ACMhttps://www.nowcoder.com/acm/contest/45#question F题和K题对大数运算的转化 首先F题,由于测试数据为接近10的100次方的大 ...

  3. width百分比

    table中的td可以在页面中直接在元素上设置width:但是li不能只能在页面中写style: <!-- <li width="20%" class="p- ...

  4. Entity Framework常用的查询方式

    Entity Framework支持的查询方式有三种 LINQ to Entities Entity SQL Native SQL [LINQ to Entities] LINQ(语言集成查询)是从V ...

  5. bat根据星期启动程序

    原来公司里的由于每次开机时启动的程序比较多,所以打算使用批处理程序,这里只列举了部分.在每周一到周五的时候,开机则启动指定的应用程序,如果是周末的两天则不启动任何程序,所以做了这个脚本.你如果需要,根 ...

  6. mockito框架

    2016-04-09 15:56:26 参考自 http://www.cnblogs.com/silence-hust/p/5017233.html http://blog.csdn.net/sdyy ...

  7. 记录一下 FastAdmin getOriginData 问题

    记录一下 FastAdmin getOriginData 问题 FastAdmin 对 用户端新增了一个 money 字段,但在后台修改时出错,提示没有 getOriginData 方法. 跟踪了一下 ...

  8. linux挂载SD卡

    (1)通过#fdisk -l命令确认板子上的linux系统是否识别SD卡 MP805M板子插入SD卡后显示 SD30 slot is without WPmmc1: new high speed SD ...

  9. 最新hadoop入门教程汇总篇(附详细图文步骤)

    关于hadoop的分享此前一直都是零零散散的想到什么就写什么,整体写的比较乱吧.最近可能还算好的吧,毕竟花了两周的时间详细的写完的了hadoop从规划到环境安装配置等全部内容.写过程不是很难,最烦的可 ...

  10. 【python】实例-判断用户输入数字的类型

    num=input("please input the num: ") print "the number your input is: "+str(num) ...