webpack之项目中引入字体

前言：

本文演示了

• 如何在项目中应用字体图标；
• 用到的loader: file-loader
  

正文：

在common下面新建fonts文件夹，并在其中加入我们手动下载好的字体文件（这里使用开源项目Ionicons）：

编辑我们的style/main.css文件。

在app.js中引入main.css文件：

这里根据以往经验，我们知道这里需要一个loader来处理我们的字体图标。

这里，我们需要loader帮我们做两件事：

1、将我们的字体图标文件移到我们的dist目录下。

2、将我们的css文件中引用的字体图标的路径进行相对应的更改。

以上两点也正是file-loader帮我们做的事情，所以配置我们的webpack.config.js文件：

npm run build 查看效果。

那么，如何引用npm直接下载字体图标库

用npm直接下载字体图标库。

npm i -S ionicons

在app.js中引入样式文件

npm run build 预览效果。

注：npm install的时候尽量的不要用cnpm，会出现问题，在node_modules下面找不到相关模块。