webpack打包iconfont

一、首先在iconfont建立项目添加需要的图标，下载压缩包到本地

提取出文件类型为 eot  ttf  svg  woff  的四类文件放到项目中，可新建一个font文件夹放入

                                                

二、将压缩包的iconfont.css文件复制到项目的css文件位置，当然也可以复制重命名一个css文件

                         

同时，需要修改url中的相对路径，我这边iconfont.css和font文件夹同级，除了data的url都需要添加 ./font/  

三、修改loader

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

这里的outputPath打包输出位置自己定义，我放在了font文件夹里

四、打包和使用

<div class="iconfont iconicon_scheduled"></div>