webpack4打包iconfont

webpack4打包iconfont

在日常开发中，项目中引入一些图标是十分常见的事情，那么遇到这样的图标，我们在打包项目的时候该如何配置webpack呢？

1. 首先我们需要一个loader

• file-loader

2. 需要到iconfont矢量图标库下载相应的图标

   如果还不知道怎么从阿里矢量图标库下载并且应用下载的图标，可以看我之前写过的一篇文章iconfont使用的三种方式

3. 把下载好的矢量图标文件夹，放项目的font文件夹
   

4. 在index.css文件中引入iconfont.css文件

// index.css
@import './less.less';
@import '../font//iconfont.css';
#root {
   
    color:orangered;
    font-size: 40px;
}

5. 修改iconfont下载包里面的iconfont.css（自定义自己的icon）
   

6. 在inde,js文件中使用icon

// index.js
import "./css/index.css";
var divs = document.createElement("div")
// 这里使用自定义的ymxfont,而不再是默认的iconfont
divs.className="ymxfont icon-mianxingbingbao"
document.getElement