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文件夹中看到:
成功