reactjs - How to use the "__webpack_public_path__" variable in my WebPack configuration? -

i working on web application using react, typescript , webpack. want webpack generate images urls according subdomain know on runtime , not during compile time.

i've read on webpacks's documentation: http://webpack.github.io/docs/configuration.html#output-publicpath

note: in cases when eventual publicpath of of output files isn’t known @ compile time, can left blank , set dynamically @ runtime in entry point file. if don’t know publicpath while compiling can omit , set webpack_public_path on entry point.

webpack_public_path = myruntimepublicpath

// rest of application entry

but can't working.

i've set "webpack_public_path" variable in app entry point. how can use value in webpack config. need use here:

"module": { "rules": [ { "test": /.(png|jpg|gif)(\?[\s\s]+)?$/, "loaders": [url?limit=8192&name=/images/[hash].[ext]] } ] }

i need smething this:

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

answer

i've managed make work. in entry point file (start.tsx), declare de __webpack_public_path__ free var before imports , assign value after imports.

/// <reference path="./definitions/definitions.d.ts" /> declare let __webpack_public_path__;  import './styles/main.scss';  /* tslint:disable:no-unused-variable */ import * react 'react'; /* tslint:enable:no-unused-variable */ import * reactdom 'react-dom'; import * redux 'redux'; import { root } './components/root';  __webpack_public_path__ = `/xxxx/dist/`; 

now, public path being used when have img tag:
<img src={require('../../images/logo.png')} />
turns into:
<img src='/xxxx/dist/images/125665qsd64134fqsf.png')} />

here's basic setup in terms of generated html:

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

my main entry point script:

__webpack_public_path__ = window.resourcebaseurl;