Jak korzystać ze zmiennej "__webpack_public_path__" w mojej konfiguracji WebPack?

Question

Obecnie pracuję nad aplikacją internetową za pomocą React, Maszynopis i WebPack. Chcę, aby pakiet WebPack generował obrazy adresów URL zgodnie z subdomeną, którą znam tylko w czasie wykonywania, a nie podczas kompilacji.

Czytałem to w dokumentacji WebPacks męska: http://webpack.github.io/docs/configuration.html#output-publicpath

Uwaga: W przypadku, gdy ewentualny publicPath z plików wyjściowych nie jest znany w czasie kompilacji, to może być pusta i ustawić na dynamicznie runtime w pliku punktu wejścia. Jeśli nie znasz nazwy PublicPath podczas kompilacji, możesz ją pominąć i ustawić webpack_public_path w swoim punkcie wejścia.

webpack_public_path = myRuntimePublicPath

// reszta wpisu aplikacji

ale nie mogę dostać pracy.

Ustawiłem zmienną "webpack_public_path" w punkcie wejścia mojej aplikacji. Ale w jaki sposób mogę użyć jego wartości w mojej konfiguracji webpacka. muszę go używać tutaj:

"moduł": { "zasady": [ { "test": /.(png|jpg|gif)(\?[\s\S] ? +) $ /, "ładowarki": [url?limit=8192&name=/images/[hash].[ext]] } ] }

muszę zrobić smething tak:

"ładowarki": [” url? limit = 8192 & name = __webpack_public_path__ /images/[hash].[ext] ']

ODPOWIEDŹ

udało mi się tego dokonać. Tak więc w moim pliku punktu wejścia (start.tsx) deklaruję de __webpack_public_path__ za darmo var przed importem i przypisuję jego wartość po imporcie.

/// <reference path="./definitions/definitions.d.ts" /> 
declare let __webpack_public_path__; 

import './styles/main.scss'; 

/* tslint:disable:no-unused-variable */ 
import * as React from 'react'; 
/* tslint:enable:no-unused-variable */ 
import * as ReactDOM from 'react-dom'; 
import * as Redux from 'redux'; 
import { Root } from './components/root'; 

__webpack_public_path__ = `/xxxx/dist/`; 

Teraz droga publiczna jest używany, gdy mam img tag:
<img src={require('../../images/logo.png')} />
Okazuje się:
<img src='/xxxx/dist/images/125665qsd64134fqsf.png')} />

Answer 1

nie jest wielkim ekspertem WebPACK, ale nie jestem pewien, że używają tego programu ładującego we właściwy sposób. Program ładujący adresy URL służy do ładowania danych plików, które są wymagane/zaimportowane do kodu.

Więc jeśli w punkcie wejścia piszesz coś takiego:

var imageData = require("path/to/my/file/file.png"); 

WebPACK będzie widać, że próbujesz importować coś innego niż .js pliku, a następnie będzie szukać na liście skonfigurowanych ładowarki, aby zobaczyć jeśli może użyć dowolnego programu ładującego do załadowania tego zasobu.

Po skonfigurowaniu programu ładującego zawierającego właściwość test, która pasuje do wymaganego typu zasobu (rozszerzenie .png), zostanie użyty skonfigurowany program ładujący (url-loader), aby załadować ten zasób do pakietu.

Można również powiedzieć WebPack co ładowarka musi on korzystać przez poprzedzenie ładowarka (i niektóre ciągi zapytań, jeśli chcesz) w ścieżce wymagać:

var imageData = require("url-loader?mimetype=image/png!path/to/my/file/file.png"); 

Ponadto, nie jestem pewien, że jest nawet Parametr name można przekazać do url-loader.

Answer 2

Oto moja podstawowa konfiguracja pod względem generowanego html:

<script> 
    window.resourceBaseUrl = 'server-generated-path'; 
</script> 
<script src="path-to-bundle" charset="utf-8"></script> 

moim głównym punktem wejścia skrypt:

__webpack_public_path__ = window.resourceBaseUrl;