11

私の問題は、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

ありがとう!!!

4

1 に答える 1