1. 程式人生 > 其它 >webpack-development配置-下載阿里字型圖示 並配置到webpack中

webpack-development配置-下載阿里字型圖示 並配置到webpack中

技術標籤:webpack-配置webpackjavascript

  • 首先在阿里字型圖示庫選好需要的字型,然後下載到本地,解壓得到
    在這裡插入圖片描述
  • 找到如下圖的五個檔案,並新增到自己的專案中
    • 注意點:如果你的iconfont.css檔案和其他的檔案不是同一級的檔案,需要修改iconfont.css中引入其他四個檔案的路徑!!
      在這裡插入圖片描述
  • 將inconfont.css檔案引入到入口的樣式檔案中
  • 在webpack.base.config.js中新增
    {
            test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
            use: [{
              loader: 'url-loader'
    , options: { limit: 10 * 1024,//限制大小 outputPath: 'fonts/',//複製出來的字型檔案輸出路徑 name: '[name].[hash:7].[ext]'//複製出來的字型圖示的名稱 } }] }