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>