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

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

 

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