私の問題は、output.publicPath 構成オプションで完全なドメインを指定しない場合です。URLが正しく読み込まれません(少なくともフォント)。
私のwebpack構成:
output: {
...
publicPath: '/assets/'
},
module: {
loaders: {
{
test: /\.less$/,
loader: "style!css?sourceMap!less?sourceMap"
},
{
test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/,
loader: 'file-loader?name=[path][name]-[hash].[ext]'
}
}
},
debug: true,
devtool: 'eval'
私は以下のファイルを持っています:
@font-face {
font-family: 'new-sources';
src: url('../../fonts/sources-icons-rev-4.eot');
...
}
私のサーバーはhttp://localhost:5000にあります。
クロムでのデバッグ中に生成された CSS を確認すると、次のように置き換えられていることがわかります。
@font-face {
font-family: 'new-sources';
src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
...
}
どちらが正しいようです!Chrome 開発ツールはエラーを報告します: 「ダウンロードしたフォントのデコードに失敗しました: http://localhost:5000/widgets/damian/9789/en」私がhtmlを提供している私の現在の場所。そして、なぜそのURLからフォントを取得しようとしているのかわかりません。
http : //localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot にアクセスした場合。できます。
publicPath を「http://localhost:5000/assets/」に変更すると、すべてが解決されます。しかし、それは私が避けたいことであり、いずれにせよ、なぜこれが起こるのかを理解したい.
私の推測では、スタイルローダーが CSS を Blob として追加するため、css は「現在のドメイン」の概念を失うため、ドメインが含まれていない URL は奇妙に動作します。
しかし同時に、これは CSS で webpack を使用するすべての人に発生するはずであり、それについてのコメントは見たことがありません。:S
ありがとう!!!