包裝字體與Webpack的單獨目錄中的真棒字體文件2

Question

我試圖在Cordova應用程序中使用Webpack 2和Font Awesome。科爾多瓦應用程序生成的文件結構是這樣的：

app 
config.xml 
hooks 
node_modules 
package.json 
platforms 
plugins 
webpack.config.js 
www 

（這自然包括我的NPM文件和的WebPack配置中，用於上下文app是我松鼠遠離原始JSX源代碼）。

www下的結構（這哪裏是編出來的Web應用程序應該去），看起來是這樣的：

css 
fonts 
img 
index.html 
js 

我創建了fonts目錄作爲的WebPack配置的目標。我遇到的問題是，我可以將字體複製到根目錄下的某個有用位置，或者我可以使過濾的CSS正確，但不能同時使用兩者。

例如，如果我用類似下面的例子：

 { 
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 
      loader: "file-loader?name=[name].[ext]&outputPath=www/fonts/&publicPath=/fonts/" 
     } 

這些文件得到安置www下，但編譯源出來纔怪。

@font-face { 
    font-family: 'FontAwesome'; 
    src: url(/fonts/www/fonts/fontawesome-webfont.eot); 
    src: url(/fonts/www/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(/fonts/www/fonts/fontawesome-webfont.woff2) format('woff2'), url(/fonts/www/fonts/fontawesome-webfont.woff) format('woff'), url(/fonts/www/fonts/fontawesome-webfont.ttf) format('truetype'), url(/fonts/www/fonts/fontawesome-webfont.svg#fontawesomeregular) format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

我還沒有嘗試放置www下的字體時，能夠找到與文件加載一個折中。 How to configure font file output directory from font-awesome-webpack in webpack?和Can't load font-awesome with Webpack的建議真的沒有得到我的任何地方。

Answer 1

file-loader中的outputPath選項與您的輸出目錄有關，因此將包含在路徑中。而publicPath只是將給定的路徑添加到使用路徑的開頭，它基本上意味着輸出目錄將位於服務器上的其他位置。這使原始路徑保持不變，因爲目錄內的結構必須保持不變。

要使其如您所描述的那樣工作，您需要更改處理輸出目錄的方式。正如你已經提到你的輸出目錄是www，這是webpack應該放置所有東西的地方。因此，將output.path配置爲www是有意義的。

output: { 
    path: path.resolve(__dirname, 'www'), 
    // Other output options 
} 

有了這個，你不需要在每一個輸出名稱/路徑指定www。例如，你可能沿着這些線做了一些事情：filename: 'www/bundle.js，這現在變成只是filename: 'bundle.js'。即使結果相同，它背後的概念也不同，因爲您只是告訴webpack將輸出文件放在哪裏，但只有文件名本身與任何處理有關，而輸出目錄是無關緊要的。

現在你在file-loader改變outputPath到fonts/並沒有publicPath，你會得到以下網址：

url(fonts/fontawesome-webfont.eot); 

這是一個相對路徑，你可能希望把它的服務器相對路徑。是唯一缺少的是全球領先的/，所以你會設置publicPath到/和您的規則變（使用更好的WebPack 2語法而不是內聯的選項，這使得它更易於閱讀）：

{ 
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 
    loader: 'file-loader', 
    options: { 
    name: '[name].[ext]', 
    outputPath: 'fonts/', 
    publicPath: '/' 
    } 
} 

您可能會希望包含資產的其他裝載機也遵守相同的公共路徑，因此可以將其設置爲output.publicPath，而不是每個裝載機定義它。

output: { 
    path: path.resolve(__dirname, 'www'), 
    publicPath: '/', 
    // Other output options 
}