パッケージ化フォントWebpack 2と別のディレクトリにある素晴らしいフォントファイル

Question

Webpack 2とFont AwesomeをCordovaアプリケーションで使用しようとしています。

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

（これは当然のコンテキストのために、私のNPMファイルとWebPACKの構成を含む、私は生のJSXのソースコードを離れてリスどこappがある。）：コルドバのアプリケーションは、このようなファイル構造を生成します。

www下の構造は、（アウトコンパイルされたWebアプリケーションは行くべき場所である）、次のようになります。

css 
fonts 
img 
index.html 
js 

私はWebPACKの構成のためのターゲットとしてfontsディレクトリを作成しました。私が実行している問題は、フォントをルートの下にある便利な場所にコピーするか、またはフィルタリングされた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に指示するだけなので、その背後にある概念は異なりますが、ファイル名自体は処理に関係しますが、出力ディレクトリは無関係です。

今あなたがfonts/へfile-loaderでoutputPathを変更するとpublicPathせずに次のURLになるだろう持っている：

url(fonts/fontawesome-webfont.eot); 

相対パスだ、とあなたはおそらくサーバー相対作りたいですパス。

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

：不足している唯一のものは、したがって、あなたが /に publicPathを設定したいとあなたのルールは（よりよいのWebPACK 2の構文を使用しての代わりに、読みやすくなりオプションを、インライン化）となり、大手 /です

アセットを含む他のローダーも、同じパブリックパスを尊重する必要があるでしょう。そのため、ローダーごとに定義する代わりに、output.publicPathに設定することができます。

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