本篇文章给大家带来的内容是关于html中的图片如何打包？html图片打包的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
webpack中是不喜欢你使用标签来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题
项目安装：npm install –save-dev webpack
全局安装：npm install -g webpack
** webpack不鼓励全局安装webpack,如果在终端中用webpack进行打包项目，就会出现不是内部命令或者外部命令。
需要配置package.json里面的script选项，我们以前的课程已经学习了配置 webpack-dev-server命令，在这个命令下面我们再加一个build命令进行打包项目使用
"scripts": {
"server": "webpack-dev-server --open",
"build":"webpack"
},删除dist目录，npm run build进行打包
立即学习“前端免费学习笔记（深入）”；
打包html中的图片：
现在进行==npm run build==打包图片并没有放入dist/images目录下,需要配置url-loader选项
module:{ rules: [
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{ test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:5000,
outputPath:'images/', }
}]
}
]
},删除dist目录，进行 npm run build 打包，可以把图片打包到images文件夹下
在src目录下的index.html中插入图片
<p><img src="./images/10.jpg" alt="html中的图片如何打包？html图片打包的方法" ></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/10777" title="Orz企业网站管理系统 双语版"><img
src="https://img.php.cn/upload/webcode/000/000/015/176370300776461.png" alt="Orz企业网站管理系统 双语版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/10777" title="Orz企业网站管理系统 双语版">Orz企业网站管理系统 双语版</a>
<p>Orz企业网站管理系统整合了企业网站所需要的大部分功能，并在其基础上做了双语美化。压缩包内有必须的图片psd源文件，方便大家修改。 Orz企业网站管理系统功能： 1.动态首页 2.中英文双语同后台管理 3.产品具有询价功能 4.留言板功能 5.动态营销网络 6.打印功能 7.双击自动滚动 Orz企业网站管理系统安装 1、请将官方程序包解压后上传至您的虚拟主机即可正常使用； 2、后台管理面板登录：</p>
</div>
<a href="/xiazai/code/10777" title="Orz企业网站管理系统 双语版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>安装==html-withimg-loader==解决html中的问题
npm install html-withimg-loader –save
配置loader(webpack-config.js)
{ test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}再次进行打包，在dist/images目录下出现img图片
npm run server 查看浏览器
相关推荐：
