webpack3配置字體圖標和打包相關問題
阿新 • • 發佈:2018-03-11
class AD ttf dev npm 路徑 col ash pub
webpak配置字體圖標有兩種方式
一、將字體圖標和css打包到同一個文件中。
1.首先需要安裝url-loader
npm install --save-dev url-loader
2.相關配置如下(開發環境使用這個方式是可以的)
{ test:/\.(png|woff|woff2|svg|ttf|eot)$/, use:{ loader:‘url-loader‘, options: { limit: 100000, //這裏要足夠大這樣所有的字體圖標都會打包到css中 } }
上文中的limit一定要保證大於最大字體文件的大小 ,因為這個參數是告訴url-loader,如果文件小於這個參數,那麽就以Data Url的方式直接構建到文件中。使用這種方式最方便,不用打包後路徑的問題,但是缺點就是構建出來的文件特別大,如果線上不要使用這種方式打包。
二、將字體圖標獨放打包到一個文件夾中。
1.首先需要安裝file-loader
npm install --save-dev file-loader
2.相關配置如下(此方式打包時使用)
{ test: /\.(woff|woff2|svg|ttf|eot)$/, use:[ {loader:‘file-loader‘,options:{name:‘fonts/[name].[hash:8].[ext]‘}}//項目設置打包到dist下的fonts文件夾下 ] }
打包中會遇到的問題就是路徑不對如圖是我開發時我把font.css和字體圖標分開放,webpack打包會把所有的css打包到一個css文件夾中,字體圖標一個文件夾中,
第一個是打包前的位置存放,第二個是打包後位置存放,按理說應該打包後和打包前位置沒有任何變化。但是卻找不到字體圖標,當我打開打包後的css文件發現,
webpack打包後的css文件中所有引用的路徑‘./’或者是‘../’都會被清除掉這點很關鍵。
問題可以定位到單獨打包css那裏肯定出現了問題,在單獨打包css那裏可以添加一個路徑會自動給引入的這些文件添加路徑 例如:publicPath:‘../‘,會在引用路徑前添加上../
如上圖設置後在打包路徑都就引入正常了。圖片路徑也是這個問題導致。同樣也就解決了圖片路徑的問題
webpack3配置字體圖標和打包相關問題