14

I am struggling to find an example of how to set the public path of an output file of a webpack bundle.

The documentation says:

If you don't know the publicPath while compiling, you can omit it and set __webpack_public_path__ on your entry point.

Like so:

__webpack_public_path__ = myRuntimePublicPath

Would anyone be kind enough to create a JSFiddle example how this can be done?

CLJ
  • 1,907
  • 5
  • 22
  • 36

1 Answers1

14

Nothing has changed after almost two years. It's still surprisingly difficult to find an example of setting public path for webpack at runtime.

Prerequisites

  • webpack 4.5.0
  • an app big enough to leverage code splitting

For simplicity let's say our html lives in index.html and app entry point is app.js

An example that works

index.html

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="app"></div>
    <script type="application/javascript">
        window.resourceBasePath = '/path/to/scripts/on/server/';
    </script>
    <script type="application/javascript" src="/path/to/scripts/on/server/app.js"></script>
</body>
</html>

app.js

// it is important to set global var before any imports
__webpack_public_path__ = window.resourceBasePath;

import React from 'react';
import ReactDOM from 'react-dom';
import {store, history} from './store';

const render = () => {
    import('./root').then((module) => {
        const Root = module.default;

        ReactDOM.render(
            <Root
                store={store}
                history={history}
            />,
            document.getElementById('app'),
        );
    });
};

render();

if (module.hot) {
    module.hot.accept('./root', render);
}

An example that doesn't work

Webpack publicPath documentation says it's enough just to set a global variable with the right name. I did that:

index.html

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="app"></div>
    <script type="application/javascript">
        __webpack_public_path__ = '/path/to/scripts/on/server/';
    </script>
    <script type="application/javascript" src="/path/to/scripts/on/server/app.js"></script>
</body>
</html>

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {store, history} from './store';

const render = () => {
    import('./root').then((module) => {
        const Root = module.default;

        ReactDOM.render(
            <Root
                store={store}
                history={history}
            />,
            document.getElementById('app'),
        );
    });
};

render();

if (module.hot) {
    module.hot.accept('./root', render);
}

In this case my app fails complaining in console it couldn't load 0.js from current path to index.html. Which means that setting public path didn't have any impact.

sergio
  • 584
  • 7
  • 12
  • the first example doesn't work for me. https://codepen.io/Ni55aN/pen/QOPKVM I have tried `__webpack_public_path__ = ..` in , Even `__webpack_public_path__ = window.resourceBasePath;` not works – Ni55aN Sep 29 '18 at 23:19
  • Do you know a way to rename the `__webpack_public_path__ ` to something else to not collide with other components that using Webpack on the page? – Shlomi Mar 25 '20 at 10:41
  • This worked for me, al I needed to do was `window.resourceBasePath = "dynamic/path/here/"; __webpack_public_path__ = window.resourceBasePath;` in the app.js – Low Feb 09 '21 at 06:42