前言
随着这么一两周走来，webpack的入门教程也到了最后一节课了，本节课将会教给大家如何打包编译图片，字体等静态资源。
目录
https://www.jianshu.com/p/9c9b555b52e8
图片打包
-
与
js，css，模板文件目录统计创建一个assets文件目录，然后随意放入一张图片。 -
将css文件中的元素，设置一个背景图，如下所示：
#container{
background: url("../../assets/bg.jpg");
}
- 运行编译
webpack
报错：
很不幸，报错了，但是这里告诉我们缺少一个对图片文件处理的loader。
- 安装
file-loader和配置webpack.config.js
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
loaders: ["file-loader"]
}
- 运行
webpack编译看看
我们可以看到这次我们编译并没有报错，但是我们打开页面看看效果呢！
报错：
找不到我们的图片文件，这是由于路径问题所导致的，那么我们怎么规避这种问题呢？很简单，在webpack的配置文件中配置一下就可以了。如下所示：
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "http://localhost:8888/webpack-demo/dist/",
filename: "js/[name]/[name].js"
}
运行一下先看看效果：
解析：
大家可以看到图片出来了，为什么呢？
因为在webpack的配置文件中，我们配置了一个publicPath，这个是做什么的呢，这个东西是指定了咱们文件资源的路径相当于，所以只要配置了这个，那么需要的一切静态资源文件，都会以这个为根路径来查找，所以咱们最终找到了这个图片。
疑问1：如果我在模板文件中直接写入图片呢？如下所示：
<body>
<div id="container"></div>
<img src="src/assets/bg.jpg" alt="">
</body>
效果如下：
大家可以看到，没有问题！
疑问2：如果我在ejs模板内部引用呢？
<div>
<span>我可以得到传来的变量 <%= name %></span>
<% for(var i = 0; i < arr.length; i++){ %>
<%= arr[i] %>
<% } %>
<img src="../assets/bg.jpg" alt="">
</div>
大家可以看到失败了，图片又找不到了，那么我们该怎么办呢？其实很简单，修改一下引入的代码，如下所示：
<div>
<span>我可以得到传来的变量 <%= name %></span>
<% for(var i = 0; i < arr.length; i++){ %>
<%= arr[i] %>
<% } %>
<img src="${require('../assets/bg.jpg')}" alt="">
</div>
解析：
${require()}这是模板的一种语法，针对于相对路径，大家可以记住这一点。
疑问3：图片直接编译在了
dist文件内，能给图片指定一个路径吗？自定义图片名字吗？
当然没有问题，修改配置如下：
{
test: /\.(png|jpg|gif|jpeg|svg)$/,
loader: "file-loader",
query: {
name: "assets/[name]-[hash:5].[ext]"
}
}
先编译运行一下看看：
项目结构图
页面效果图
解析：
大家可以看到，在dist文件下，咱们生成了想要的assets文件夹，并且将图片名称自定义了，取了原图片名称，加上了hash值5位，然后加上了自己原有的图片后缀名。如下所示：
name: "assets/[name]-[hash:5].[ext]"
assets: 文件名
[name]: 原有文件名
[hash: 5]: 取5位hash值
[ext]: 文件本身的后缀名
还能优化一下图片引用吗？
可以！大家知道，引用图片也算一个网络请求，如果图片多了，自然网页加载满，那我们怎么优化一下呢？例如，图片小于20k的，我们就让他编译成base64位的图片字符，这样子我们不就减少了一个网页请求了吗？
优化图片的引用，减少网络请求的数量！
第一步：安装url-loader
第二步：修改一下处理图片的loader配置，如下所示：
{
`test: /\.(png|jpg|gif|jpeg|svg)$/,
`loader: "url-loader",
`query: {
limit: "90000",
name: "assets/[name]-[hash:5].[ext]"
}
}
编译看看效果：
未报错
网页效果图
解析：
大家可以看到，图片中使用了base64位的格式来展示图片，为什么呢？咱们来看看我们的配置：
{
`test: /\.(png|jpg|gif|jpeg|svg)$/,
`loader: "url-loader", // 使用url-loader
`query: {
limit: "90000", // 小于90k的图片使用base64位来打包编译并且页面显示
name: "assets/[name]-[hash:5].[ext]"
}
}
再次优化图片体积
使用image-webpack-loader，配合着url-loader或者file-loader一起使用，可以大大压缩图片体积。这里大家就自己试一下哦，这里就不赘述了。
后言
webpack的教程到这里就暂且告一段落，若我后面继续深入webpack或者有什么新的心的，会继续写文分享给大家的，希望可以陪着大家一起成长，至今为止从0开始自学前端已经差不多13个月了，从一边工作一边学习中收获了很多，学习了很多，2018，对自己说加油！
说明
原创作品，禁止转载和伪原创，违者必究！
网友评论