html中的图片如何打包?html图片打包的方法
程序员文章站
2022-03-18 10:46:53
...
本篇文章给大家带来的内容是关于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"></p>
安装==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 查看浏览器
相关推荐:
以上就是html中的图片如何打包?html图片打包的方法的详细内容,更多请关注其它相关文章!