需要的loader
- file-loader
（让我们可以引入这些资源文件） - url-loader
（其实是file-loader的二次封装） - img-loader
（处理图片所需要的）
在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。
其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。
{
test:/\.(png|jpg|jpeg|gif)$/,
use:'file-loader'
}
这样简单配置就可以了，只不过打包的图片名是一串hash
可以处理图片文件名
{
test:/\.(png|jpg|jpeg|gif)$/,
use:{
loader:"file-loader",
options:{
// 打包出来图片文件的名字
// 默认是[hash].[ext]
// ext是后缀的意思
// [name]是原文件名
name:'[name].[hash:4].[ext]'
}
}
}
处理图片常见的坑
路径问题，打包之后图片找不到
一般解决这种问题就是该file-loader配置中的outputPath和publicPath：
use:{
loader:"file-loader",
options:{
name:'[name].[hash:4].[ext]',
// 打包后文件的位置，
// 不设置图片就会在dist根目录下
// 让他放在dist/assets/img文件夹下
outputPath:"assets/img",
// 设置outputPath后
// css文件中引入的图片地址会跟着改变
// 例如assets/img/img2.412d.jpg
// 但是我们设置publicPath之后
// css引入的图片地址就是
// ./aaa/img2.412d.jpg
//publicPath:'./aaa'
publicPath:'assets/img'
//写成和outputPath一样，一般就不会错
}
在file-loader中定义的publicPath会对所有js中的或是css中的图片地址生效，变成publicPath/[name].[hash:4].[ext]的类似名字
在webpack的配置项output中也有一个publicPath,这个不影响css中图片的路径，
他是会影响最终html中css文件和js文件的引入路径的。
output: {
path: __dirname + "/dist",
filename: "./[name].bundle.js",
publicPath:"./"
},
一般来说我们不使用file-loader，而是使用url-loader
url-loader是基于file-loader的二次封装，所以原来对file-loader的配置可以照搬过来，不过其中有一个新功能：把小的资源文件转码base64的功能：limit。
use:{
loader:"url-loader",
options:{
name:'[name].[hash:4].[ext]',
outputPath:"assets/img",
publicPath:'./aaa',
// 小于300kb的图片文件就转码为base64
limit:300000
}
}
一般设置为5000就行，就是5kb，也不好把所有的图片都转码，转码后的体积只不过转移到css或HTML文件上了，HTML文件大就会导致首次加载时间慢
图片压缩img-loader
{
// 注意两个loader的顺序
// 要先压缩图片
// 首先，你只引入这个loader是没有任何压缩效果的
// 压缩都是靠plugins完成的
loader:"img-loader",
options:{
plugins:[
// 这些插件都是要额外下载的
// 压缩png：
require('imagemin-pngquat')({
// 如何控制压缩的质量
// speed 1-11 值越大质量越好体积越大
speed:5
}),
// 压缩jpg
require('imagemin-mozjpeg')({
// 如何控制压缩的质量
// quality 1-100 值越大质量越好体积越大
quality:80
}),
require('imagemin-gifsicle')({
optimizationLevel:1
// 三个值1,2,3。3就是最极致的压缩
})
]
}
}
图片优化总结
1.png压缩到0.5左右，gif、jpg等图片看情况压缩到0.8到0.6
2.base转码一般在5000byte左右
HTML引入的图片如何处理
在js和HTML文件中的图片怎么处理
在js中图片要import引入再用
import img1 from './assets/img/img1.png'
var img=new Image();
img.src=img1;
document.getElementById('mydiv').appendChild(img);
在HTML文件中是不能直接用静态路径来引用图片文件的，它是不解析的
这样写没有用，最后在打包出来的文件夹中，根本就不会把这个图片打包进来
html中图片的处理方式有两种：
1.在htmlWebpackPlugin（打包HTML的插件）是可以让我们在HTML中使用模板字符串的，他支持ejs语法也支持es6的模板语法。
![](${require("./assets/img/img4.jpg")})
这样写他才会去处理这个图片文件
这个功能是htmlWebpackPlugin这个插件提供的
测试此方法无效
2.使用html-loader，就可以按平常的方式引入图片了（当然要在html-loader之后使用file-loader或是url-loader来处理图片）
测试无效
可以将html中的图片文件正确的打包到打包后的文件夹中，但是在html打包后的代码中显示的是src="[object Object]，百度说要降低file-loader的版本。我试着把url-loader的版本降低之后，发现没有用，然后我把url-loader又换成最新版本，但是把file-loader从版本5换成了版本1，然后，哈哈，终于好了，（所以使用url-loader还是要安装file-loader吗？我使用的是url-loader，但是把安装的file-loader降低版本后，竟然就好了。好吧，亲测，我在删除了file-loader之后，使用url-loader报错，而且重新安装之后就好了，看来是依赖的）
又浪费一下午
而且postcss-loader好像不用配置autoprefixer，他会自动失效这个功能
webpack雪碧图
webpack雪碧图都是根据原图的大小然后拼接和定位，往往背景图片是需要调尺寸的，所以他做的不太好，他不适合大图片，但是在我们需要做图标的时候是有用的，因为对于图标来说切出来多大就用多大。
雪碧图的合成有两种方式
1.postcss-sprites
他属于postcss-loader的插件，会自动把css文件中引入的背景图合成雪碧图，并修改css文件,会自动的把css中的文件全部合成雪碧图，而webpack-spritesmith是把指定的合成雪碧图
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: [
require("postcss-sprites")({
// 指定合成的雪碧图放在上面位置
spritePath:"./dist/assets/img/sprite"
})
]
}
}
2.webpack-spritesmith
他属于一个独立的插件，会按照指定的路径的指定图片，生成一个雪碧图，和一个雪碧图相关的css文件，不会修改原css。
在webpack.config.js文件的plugins配置项中添加：
new webpackSpiriteSmith({
src:{
// 图片来源文件夹
cwd:path.join(__dirname,'src/assets/img'),
// 处理什么图片
glob:"*.jpg"
},
target:{
// 打包到哪
image:path.join(__dirname,'dist/sprites/sprite.png'),
css:path.join(__dirname,'dist/sprites/sprite.css'),
},
apiOption:{
// 指定最后打包出来的sprite.css中的雪碧图引入地址
cssImageRef:"./sprites/sprite.png"
}
})
这两种方式都有各种缺陷，所以有时还是自己ps合成吧。
其他资源文件的处理
其实所有的资源处理都是一个样
1、定义test规则
2、使用url-loader或者file-loader来处理路径
3、规划路径