webpack 处理图片资源
图片的引入方式
图片是前端项目必不可少的静态资源，在日常开发中，我们可能会在下面三种情况使用图片：
1.HTML 中通过img标签等方式引入；
2.CSS 中通过src等方式引入；
3.JavaScript 中使用图片的 URL 或者内容（比如 Canvas 等）；
最笨最直接的方式就是直接写死线上的地址，例如在页面中，我们引入 如下:
<img src=”http://cdn.example.com/public/logo.png” />
上面地址的 http://cdn.example.com 是一个 CDN 静态域名，后面是我们完整的路径，这样我们上线的时候地址就可以直接看了，我们线下开发的时候可以提前将静态资源打包好上传到线上。这样操作想想就很费劲，而且 CDN 每次静态资源更新都要需要刷新缓存，如果我们使用 MD5 命名图片的时候就更麻烦了。
我们在 Webpack 中，则可以使用 loader 的方式完成图片的引入。例如在 CSS 文件中，直接相对路径使用背景图片：
.bg-img{
backgroud: url('./public/logo.png') no-repeat;
}
在 HTML 中也可以直接使用相对路径：
<img src=”./public/logo.png” />
还记得我们之前学过的resolve.alias方式创建一个目录的alias引用，这种方式不仅仅可以在 JavaScript 中使用，在 HTML 和 CSS 中也可以使用的：
// webpack.config.js
module.exports = {
resolve: {
alias: {
'@assets': Path2D.resolve('./src/assets')
}
}
}
<img src=”@assets/public/logo.png” />
使用 loader 来加载图片资源
怎么使用图片我们了解了，但是怎么让 Webpack 识别图片，并且能够打包输出呢？这时候就需要借助 loader 了，这里有两个 loader 可以使用：file-loader 和 url-loader 。
file-loader和url-loader是经常在一些 Webpack 配置中看到的两个 loader，并且两个 loader 在一定应用场景上是可以相互替代的，但是对于两者的区别，很少有人能够说得清楚，下面介绍下两者的区别。
- file-loader：能够根据配置项复制使用到的资源（不局限于图片）到构建之后的文件夹，并且能够更改对应的链接；
- url-loader：包含 file-loader 的全部功能，并且能够根据配置将符合配置的文件转换成 Base64 方式引入，将小体积的图片 Base64 引入项目可以减少 http 请求，也是一个前端常用的优化方式。
下面以url-loader为例说明下 Webpack 中使用方法。首先是安装对应的 loader：
npm install -D url-loader
下面我们创建一个项目，目录结构如下：
|---- package.json # npm package.json
|---- src
| |---- assets # 静态资源
| |---- img # 图片资源
| |---- large.png # 大图片 超过 1M
| |---- small-01.png # 小图图片
| |---- small-02.png # 大图片 超过 1M
| |---- small-03.png # 大图片 超过 1M
| |---- index.css # css 文件
| |---- index.html # html
| |---- index.js # js
|---- webpack.config.js # webpack 配置
首先我们在index.css中引入 small-01.png:
.bg-img{
backgroud: url(./assets/img/small.png) no-repeat;
}
然后在index.js中引入了index.css和large.png：
import img from './assets/img/large.png'
import style from './index.css'
console.log(img, style);
最后我们在index.html中通过 img 引入large.png：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="./assets/img/large.png" alt="背景图">
</body>
</html>
这时候我们修改webpack.config.js：
const HTMLPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './srcindex.js',
devtool: false,
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader'
}
}
]
},
plugins: [
new HTMLPlugin({
template: './src/index.html'
})
]
}
执行webpack后发现，打包出来的文件都比较大，通过查看内容发现，我们的图片被Base64处理了，然后直接引入了。
这是因为url-loader本身优先是将资源Base64引入的。虽然图片Base64可以减少 http 请求，但是对于1M+这么大的图片都Base64处理，范围增加了 CSS、JavaScript 等文件的大小，而且将这么大的Base64反解成可以使用的图片渲染出来，时间消耗也是很大的。
所以这时候需要使用url-loader的limit选项来控制不超过一定限制的图片才使用Base64：
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader'，
options: {
imit: 3*1024
}
}
}
这时候再执行webpack，发现多打出一个ad19429dc9b3ac2745c760bb1f460892.png的图片，这张图片就是large.png的图片，因为超过了limit=3*1024显示所以没有被处理成Base64。
继续查看index.html和main.js（index.js打包出来的文件），发现我们使用large.png的地址都被 Webpack 自动替换成了新的路径ad19429dc9b3ac2745c760bb1f460892.png。
配置 CDN 域名
一般静态资源上线的时候都会放到 CDN，假设我们的 CDN 域名和路径为：http://bd.bxstatic.com/img/，这时候只需要修改output.publicPath即可。
