webpack中图片打包

本文简单说明两种打包图片的方法：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得到的结果相同。