How to use the __webpack_public_path__ variable in my webpack configuration?

Question

I am currently working on a web application using React, Typescript and WebPack. I want WebPack to generate Urls images according to a subdomain that I only know at runtime, and not at compile time.

I read about this in the WebPacks documentation: http://webpack.imtqy.com/docs/configuration.html#output-publicpath

Note. In cases where the possible publicPath from the output files is not known at compile time, it can be left blank and dynamically set at run time in the entry point file. If you do not know publicPath at compile time, you can omit it and set webpack_public_path at your entry point.

webpack_public_path = myRuntimePublicPath

// the rest of your application record

But I can’t make it work.

I set the variable "webpack_public_path" at the entry point to the application. But how can I use its value in my webpack configuration. I need to use it here:

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

I need to do something like this:

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

ANSWER

I managed to get it to work. So in my entry point file (start.tsx), I declare de __webpack_public_path__ free var before importing and assign its value after import.

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

Now the public path is used when I have the img tag:
<img src={require('../../images/logo.png')} />
Included in:
<img src='/xxxx/dist/images/125665qsd64134fqsf.png')} />

Answer 1

Here is my main setup for the generated html:

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

my main script entry point:

 __webpack_public_path__ = window.resourceBaseUrl; 

Answer 2

Not a great webpack expert, but I'm not sure if you are using this bootloader correctly. The URL downloader is designed to download files that are needed / imported into your code.

So, if at your entry point you write something like:

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

Webpack will see that you are trying to import something other than a .js file, and then you will look in the configured bootloader list to see if it can use any bootloader to load this resource.

Since you created a bootloader with the test attribute that matches your resource type (.png extension), it will use this customized loader (url-loader) to try to load this resource into your package.

You can also tell webpack which bootloader it needs to use by adding the bootloader (and some query strings, if you want) in the desired path:

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

Also, I'm not sure if there is even a name parameter that you can pass to url-loader .