webpack傻瓜式入门教程-07
前言
随着这么一两周走来,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,对自己说加油!
说明
原创作品,禁止转载和伪原创,违者必究!