【webpack】快速笔记4 -- loader（字体图标）

如何抽取有用的字体文件呢？

去www.iconfont.cn去下载寻找字体图标，下载到本地并且解压：

抽取这五个文件（有时没有woff2就不用管）：
eot || svg || ttf || woff || woff2

然后复制 iconfont.css 里面的css样式，只 src: url('./font/iconfont.eot?t=1566835316127') 注意要引入对应的字体图标文件的位置

如何使用iconfont ：
后面的iconfont…这个就是在iconfont.css中找对应的即可，后者去官方复制对应的字体图标引入！

import './index.scss';

var app = document.getElementById('app');
app.innerHTML = '<div class="iconfont iconComputingPlatform-blue"></div>';

那么打包配置就要这样写(使用file-loader)：

{
   test: /\.(svg|ttf|eot|woff)$/,
   use: {
       loader: 'file-loader',
  }
}

可以看看这些文档：

https://www.webpackjs.com/guides/asset-management/

https://www.webpackjs.com/loaders/

对应看 sass-loader || css-loader || style-loader || portcss-loader 这几个文档

结语

关于loader目前就说这个三个，后续有特殊模块会继续补充讲述，也可以查阅一下webapck文档关于loader那部分

#下一篇讲【plugins像极了什么？ 生命周期函数？~】