补充，在前面的服务启动执行命令中，我们在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中引入： 复制代码 复制代码 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: View Code src/index.css: View Code webpack.config.js: View Code entry.js://入口文件 View Codehttps://www.cnblogs.com/wfaceboss/p/10122803.html