webpack 打包图片文件

一、准备工作

       1. 在src文件夹中新建一个img文件夹，并且在里面放两张图片；

          

        2.在css文件中引用图片，从而让webpack能够知道这个图片也是要打包的；

         

二、  使用url-loader和file-loader

        能打包图片的loader有url-loader、file-loader;二者的区别在于当图片的大小>url-loader中的limit时，那么webpack会选择使用file-loader来打包。关于如何在webpack中文官网找到loader并且如何使用请看我的其他文章。

        1. 接下来看一下详细的url-loader配置:

        

        重点放在options中的limit和name, limit的作用就是当要打包的图片大小>limit设置的值时，会使用file-loader进行打包。name的作用是对打包生成的图片文件进行命名规约；我来详细解释一下： img/的作用是在dist目录下会新建一个img文件夹用于存放图片；[name]是使用图片原本的名称;[hash:8]是通过哈希函数将图片的名字进行计算，然后取前8位;[ext]就是图片文件本身的后缀名。[name].[hash:8].[ext]就是用来生成文件名的，所以打包后图片最终的效果就是这样了：

       

       注意点1：那就是这个name它是使用file-loader打包才会有的效果哦，如果是url-loader进行打包，那么打包好的图片不会按照name的规则来生成，这个要注意一下。

      注意点2： 因为打包好的图片输出位置是在dist文件夹中，所以还需要一个配置：publicPath='dist/'

      

      老实说我还没有办法说清楚它，但是加上去才能成功打包，所以先加上，等我后面知晓了它的作用我会补上它的作用的。