WebPack yapılandırmamda "__webpack_public_path__" değişkeni nasıl kullanılır?

Question

Şu anda React, Typescript ve WebPack kullanarak bir web uygulaması üzerinde çalışıyorum. WebPack'in, yalnızca çalışma zamanında bildiğim ve derleme zamanı sırasında değil, bir alt etki alanına göre görüntülü URL'ler üretmesini istiyorum.

Ben WebPacks belgelerine bu okudum: http://webpack.github.io/docs/configuration.html#output-publicpath

Not: Çıktı dosyalarının nihai publicPath derleme zamanında bilinmediği durumlarda, boş bırakılır ve en dinamik ayarlanabilir giriş noktası dosyasında çalışma zamanı. Derleme sırasında publicPath bilgisini bilmiyorsanız, giriş noktanızı atlayıp webpack_public_path'u ayarlayın.

webpack_public_path Başvurunuz girişi

ait = myRuntimePublicPath

// dinlenme Ama o çalışma alınamıyor.

"Webpack_public_path" değişkenini, uygulama giriş noktasında ayarlıyorum. Ancak değerini webpack yapılandırmamda nasıl kullanabilirim?

"modül": { "kurallar": Burayı kullanmak gerekir [ { "test": /.(png|jpg|gif)(\?[\s\S] ? +) $ /, "yükleyiciler": ] }

ihtiyacım [url?limit=8192&name=/images/[hash].[ext]] } böyle smething yapmak için:

"yükleyiciler": [' url? limiti = 8192 & name = __webpack_public_path__ /images/[hash].[ext] ']

Ben çalışması için idare ettik

YANIT. Yani giriş noktası dosyamda (start.tsx), ithalattan önce __webpack_public_path__ ücretsiz varsayı bildiririm ve ithalattan sonra değerini atarım. i bir img etiketine sahip Şimdi, kamu yol kullanılıyor

/// <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/`; 

:
<img src={require('../../images/logo.png')} />
dönüşüyor:
<img src='/xxxx/dist/images/125665qsd64134fqsf.png')} />

Answer 1

Büyük bir webpack uzmanı, ama emin değilim Bu yükleyiciyi doğru şekilde kullanıyorlar. Url-loader, kodunuzda gerekli/ithal edilen dosya verilerini yüklemenize yardımcı olacak.

gibi bir şey yazmak için giriş noktasında eğer

Yani:

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

WebPack size yapılandırılmış yükleyici listesinde arayacaktır sonra bir .js dosyadan daha farklı bir şey almaya çalıştığınız ve olduğunu göreceksiniz

görmek için Bu kaynağı yüklemek için herhangi bir yükleyici kullanabilir.

Gerekli kaynak türünüzle (extension .png) eşleşen bir test özelliği ile bir yükleyici oluşturduğunuzdan, bu kaynağı paketinize yüklemeyi denemek için yapılandırılmış yükleyici (url-loader) kullanır.

Ayrıca (isterseniz ve bazı sorgu dizeleri) o gerektiren yolunda yükleyici prepending olarak kullanmak gerekeni yükleyici webpack söyleyebilir: Ayrıca

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

, orada bile emin değilim name parametresini url-loader'a iletebilirsiniz.

Answer 2

İşte oluşturulan html açısından benim temel kurulum var:

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

benim ana giriş noktası komut: En cevaplamaya için

__webpack_public_path__ = window.resourceBaseUrl;