本文简单说明两种打包图片的方法：JS中引入的图片和HTML中引入的图片。
打包前准备依赖包和配置文件
npm install url-loader --save-dev //安装依赖包- 在
webpack.config.js中配置文件，如下图：
配置url-loader
其中
limit=5000表示小于5000bytes的图片将直接以base64的形式内联在代码中，可以减少一次http请求；name=pic/[name].[ext]表示大于5000bytes的图片将存入输出路径的pic/文件夹命名格式不变。
- 文件夹包含关系如下：
文件夹.png
1.JS中引入的图片打包
- 引入格式如下：
JS引入
运行webpack后文件目录如下：
运行后输出目录中新增pic文件夹和名字为bundle的js文件
2.HTML中引入图片打包
- 由于之前的入口函数
main文件夹中未引入html文件，所以webpack不会解析html文件中的图片路径，所以要加载html文件，需要下载依赖包：
npm install html-withimg-loader --save-dev
在webpack.config.js中配置文件，如下图:
配置文件
- 在入口函数
main文件中引入html文件，这样webpack就能够解析html啦~
main文件如下：
main文件
注意：使用此引用方式时，html文件必须与
main文件在同一目录下。
- 进行完以上两步即可运行webpack打包，结果与方法1得到的结果相同。
