webpack-图片配置

webpack图片配置

file-loader@0.9.0

1.先往文件夹中放入图片

2.修改css文件中的背景路径

3.安装url-loader

选择合适的版本，不然会报错

npm install  --save-dev url-loader@1.1.2

4.修改module配置

在config.js文件中修改module配置（具体配置去webpack中找）

注意！！！：此时放入的test.jpg图片是大概15kb，在module中有options下的limit，设置为17000是大于test图片的大小，（test：15*1024），但是如果放入的图片比limit大的话，还需要修改！！
小于：base64字符串直接响应给浏览器
大于：被打包后才给浏览器

   （1）要安装file-loader@0.9.0
   （2）修改config.js中output

如图所示，添加publicPath:'dist/'

相当于把那张图片打包到dist中。

5.最后打包

在终端运行npm run build

但也会遇到一个问题：如果将图片直接放入dist文件夹中，图片的命名是哈希值，如果图片很多的话会比较乱，此时就希望把图片打包到dist中的img文件夹中，再按规定的方式命名。
可以在config.js文件中进行修改：添加在file-loader中的use中，name:'img/[name].[hash:8].[ext]'

表示在dist文件夹中建立一个img文件夹，[name]表示图片原来的名字，[hash:8]表示哈希值的前8位，[ext]是扩展名。
最后打包就可以在dist文件夹中看到：

成功