html中的图片如何打包？html图片打包的方法

2020-03-24 18:08:37

字体：大中小

来源：转载

供稿：网友

本篇文章给大家带来的内容是关于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 查看浏览器