webpack4 压缩图片字体文件

我这里安装的是全局的webpack 在执行的时候只需在写好的项目文件下执行命令webpack就会压缩完成了

今天说的是压缩图片和字体等资源

举个例子:在css文件中引入图片

.box{
   width: 200px;
   height: 200px;
   background: #000066;
   transition: 0.5s;
   background: url(../img/0.jpg) no-repeat;
}

如果之前之装有 css-loader和style-loader 他到图片处理这里就会报错因为我们还没有安装处理图片的loader

2.安装所需要的依赖

npm i file-loader url-loader -D

{
               test:/\.(jpg|png|fig)$/i,
               use:{
                   loader:"url-loader",
                   options:{
                       outputPath:'img/', //相对于 outputPath的路径输出会到 dest/img中
publicPath:'dest/img', //对外输出路径就是在html文件中的图片引入路径
                       limit:8*1024
                   }
               }
           }

其中file-loader和url-loader都是可以用来处理图片资源的

区别是 url-loader 在options中有一个 limit 限制如果超过 8*1024b 也就是 8kb的图片资源就会选择使用file-loader加载

如果小于的话还是使用 url-loader 不过并不会生成图片资源了只是以base64加密的方式将图片解析成一个字符串放在浏览器上依次来减少对服务器的请求次数

3.最后在以bootstrap为例子来说一下对字体的加载

首先我们安装 bootstrap npm i bootstrap@3 -D

在main.js中引入 bootstrap

import "bootstrap/dist/css/bootstrap.min.css"

在index.html中使用

</div>

在webpack.config.js中配置

{
               test:/\.(eot|svg|ttf|woff|woff2)$/i,
               use:{
                   loader:'url-loader',
                   options:{
                       outputPath:'fonts/',
                       publicPath:'dest/fonts',
                       limit:4*1024
                   }
               }
           }

最后执行webpack 运行命令

就可以在页面上看到运用bootstrap的页面效果了

yunchong_zhao

发布了116 篇原创文章 · 获赞 64 · 访问量 7481

私信关注

webpack4 压缩图片字体文件

猜你喜欢