12
votes

I am currently working on a web application using React, TypeScript and Webpack. I want Webpack to generate images URLs according to a subdomain that I only know on runtime and not during the compile time.

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

Note: In cases when the eventual publicPath of of output files isn’t known at compile time, it can be left blank and set dynamically at runtime in the entry point file. If you don’t know the publicPath while compiling you can omit it and set webpack_public_path on your entry point.

webpack_public_path = myRuntimePublicPath

// rest of your application entry

But I can't get it working.

I've set the webpack_public_path variable in my app entry point. But how can I use its value in my Webpack config? I need to use it here:

"module": { "rules": [ { "test": /.(png|jpg|gif)(\?[\s\S]+)?$/, "loaders": [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've managed to make it work. So in my entry point file (start.tsx), I declare de __webpack_public_path__ free var before the imports and I assign its value after the imports.

/// <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 being used when I have an img tag:

<img src={require('../../images/logo.png')} />

Turns into:

<img src='/xxxx/dist/images/125665qsd64134fqsf.png')} />
2

2 Answers

11
votes

Here's my basic setup in terms of the 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;
-1
votes

Not a big webpack expert, but I'm not sure you are using that loader in the right way. The url-loader is there to help you load files data that are required/imported in your code.

So if in 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 different than a .js file and then will search in your configured loader list, to see if it can use any loader to load that resource.

Since you had set up a loader whith a test property that matches your required resource type (extension .png), it will use that configured loader (url-loader) to try loading that resource into your bundle.

You can also tell webpack what loader he needs to use by prepending the loader (and some query strings if you wish) in the require path:

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

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