补充，在前面的服务启动执行命令中，我们在package.json中的配置信息为：

 "scripts": {
    "server": "webpack-dev-server",
  },

该种方式在启动服务后还需自己访问相关url，这很不友好。此处我们新增一些配置，保证在我们启动服务后自动访问url并渲染，配置如下：

 "scripts": {
    "server": "webpack-dev-server --open",
  },

这样就实现了服务启动浏览器也会自动打开。
正文：
在前端开发中，我们常用img标签来引入图片,这样webpack在打包时又得做一些特殊处理，此处我们通过一个插件html-withimg-loader 来处理我们在html 中引入图片的问题。

处理html中的图片

image.png

1.新增一张图片

在src/images目录下新增一张图片，作为等会引入到html文件中图片，此处我的图片为wfbin.png。

image.png

2.引入图片

在src/index.html中引入：

<div>
    <img src="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进行打包，我们的图片被进行了很多好的打包。

image.png

6.启动服务

运行命令npm run server命令，服务被启动，浏览器自动打开，并进行了渲染，如下：

npm run server

渲染效果：

image.png

记：到此完成了webpack打包过程中图片的相关处理。