Webpack: Czy muszę określić domenę w publicPath dla dyrektywy url(), aby działała w CSS?

Question

Mój problem polega na tym, że jeśli nie podam pełnej domeny w opcji output.publicPath; wtedy adres URL nie ładuje się prawidłowo (przynajmniej czcionki).

Moja WebPack config:

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' 

mam mniejszy plik, który stwierdza:

@font-face { 
    font-family: 'new-sources'; 
    src: url('../../fonts/sources-icons-rev-4.eot'); 
    ... 
} 

Mój serwer jest w http://localhost:5000.

Kiedy sprawdzasz wygenerowany CSS podczas debugowania w chromie widzę, że został zastąpiony przez:

@font-face { 
    font-family: 'new-sources'; 
    src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot); 
    ... 
} 

Które wydaje poprawne! Ale nie działa Narzędzia do Chrome Chrome zgłaszają błąd: "Nie udało się zdekodować pobraną czcionkę: http://localhost:5000/widgets/damian/9789/en" Wskazując, że próbowano załadować czcionkę tego adresu URL, ale ten adres URL to moja bieżąca lokalizacja, w której obsługuję kod HTML. I nie wiem, dlaczego próbuje pobrać czcionkę z tego adresu URL.

Jeśli przejdę na: http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot. To działa.

Wszystko jest rozwiązane, gdy zmieniam publiczną ścieżkę na: 'http://localhost:5000/assets/'. Ale jest to coś, czego chcę uniknąć, i w każdym razie chciałbym zrozumieć, dlaczego tak się dzieje.

Domyślam się, że od czasu ładowania stylów, dodaj CSS jako Blob, że css traci pojęcie "bieżącej domeny", więc adresy URL, które nie mają w nim domeny, działają dziwnie.

Ale w tym samym czasie powinno to się zdarzyć każdemu, kto korzysta z pakietu internetowego z CSS, i nie widziałem żadnych komentarzy na ten temat. : S

Dzięki!

Answer 1

Znaleziono. Dzięki @diunarlist na gitarze internetowej.

To dlatego, że używałem sourceMap z ładowarką stylu. Zaznacz https://github.com/webpack/style-loader/issues/55

W przypadku map źródłowych program ładujący styl używa obiektu Blob, więc do działania wymaga bezwzględnych adresów URL.

Bez map źródłowych używa znacznika stylu wbudowanego, więc nie ma problemu.