webpack3配置字體圖標和打包相關問題

webpak配置字體圖標有兩種方式

1、將字體圖標和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的方式直接構建到文件中。使用這種方式最方便，不用打包後路徑的問題，可是缺點就是構建出來的文件特別大，若是線上不要使用這種方式打包。 

2、將字體圖標獨放打包到一個文件夾中。

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:'../',會在引用路徑前添加上../

 

如上圖設置後在打包路徑都就引入正常了。圖片路徑也是這個問題致使。一樣也就解決了圖片路徑的問題