Webpack打包字體font-awesome的方法示例
使用webpack構(gòu)建font-awesome或者bootstrap的時候，最常見的一個問題就是構(gòu)建字體文件的問題。經(jīng)常會出現(xiàn)無法找到字體文件的問題。下面就講一下如何正確構(gòu)建引入字體文件：
1. 首先安裝依賴:
2. 在入口文件中引入font-awesome
require('font-awesome-webpack');
3. 設置webpack.config.js處理字體文件
這里有兩種方式，如果你不想單獨生成字體文件，而是想把字體文件和css文件構(gòu)建到一個文件中，可以使用url-loader，設置如下：
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'url-loader?limit=1000000'
},
// 省略其他配置...
]
}
這里給url-loader傳遞了一個參數(shù)limit，并且設置得比較大，這個數(shù)字可以自定義，但是一定要保證大于最大字體文件的大小，因為這個參數(shù)是告訴url-loader，如果文件小于這個參數(shù)，那么就以Data Url的方式直接構(gòu)建到文件中。使用這種方式最方便，但是缺點就是構(gòu)建出來的文件特別大，并且在線上的時候沒辦法使用cdn緩存文件，不建議部署到線上。
第二種方法就是制定url-loader或者file-loader在構(gòu)建的時候文件的輸出目錄，這樣在部署的時候font-awesome就會依賴在構(gòu)建時指定目錄下的字體文件，而不會出現(xiàn)找不到字體文件的問題了，此時，webpack的構(gòu)建配置如下：
module: {
rules: [
// 省略其他配置...
// font-awesome
{
test: /\.(eot|svg|ttf|woff|woff2)\w*/,
loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
},
// 省略其他配置...
]
}
經(jīng)過上面的配置構(gòu)建的工程，font-awesome就會到“/static/res/font/”目錄下尋找指定的字體文件，而同時在你構(gòu)建的工程中也會生成對應的font文件夾，你只需要將這個font文件夾中的字體文件拷貝到“/static/res/font”目錄下（如果publicPath為“./”，表示你直接依賴構(gòu)建目錄下的font文件，則不用拷貝），這樣當你訪問你的頁面時就能夠正確請求到字體文件了。
參考
https://github.com/webpack-contrib/file-loader
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于MVC4+EasyUI的Web開發(fā)框架形成之旅之界面控件的使用
一般Web界面包括的界面控件有：單行文本框、多行文本框、密碼文本框、下拉列表Combobox、日期輸入控件、數(shù)值輸入控件、單項選擇、復選框、表格控件DataGrid、樹形控件、布局控件、彈出式對話框、提示信息、列表控件等，這些界面控件的操作都有哪些不同，下面逐一介紹2015-12-12
這篇文章主要介紹了JS使用正則表達式判斷輸入框失去焦點事件問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了微信小程序接入微信支付實現(xiàn)過程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-12-12
實例代碼詳解javascript實現(xiàn)窗口抖動及qq窗口抖動
這篇文章主要介紹了實例代碼詳解javascript實現(xiàn)窗口抖動及qq窗口抖動的相關資料,需要的朋友可以參考下2016-01-01
javascript設計模式 – 裝飾模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 裝飾模式,結(jié)合實例形式分析了javascript裝飾模式基本概念、原理、應用場景及操作注意事項,需要的朋友可以參考下2020-04-04
你還不懂遞歸？讀完這篇文章保證你會懂，下面這篇文章主要給大家介紹了關于遞歸的相關內(nèi)容，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
擴展bootstrap的modal模態(tài)框-動態(tài)添加modal框-彈出多個modal框
這篇文章主要介紹了擴展bootstrap的modal模態(tài)框-動態(tài)添加modal框-彈出多個modal框,需要的朋友可以參考下2017-02-02
Function是javascript里最常用的一個概念，javascript里的function是最容易入手的一個功能，但它也是javascript最難理解最難掌握的一個概念。這篇文章主要介紹了JavaScript中的Function類型的相關資料，一起看下吧2016-07-07
JavaScript 語言具有多種數(shù)據(jù)類型,它們可以大致分為兩大類：基本數(shù)據(jù)類型（Primitive Data Types）和引用數(shù)據(jù)類型（Reference Data Types）,本文將帶大家一起從基礎到精通深入探究JavaScript的類型判斷,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了詳解webpack分離css單獨打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06