ES6 says that import statements are always hoisted (brought to the top of the current module). This means that the following are equivalent:

__webpack_public_path__ = "asdf";
import foo from "foo";

import foo from "foo";
__webpack_public_path__ = "asdf";

They are always treated as though you had the second version.

This is part of the ES6 spec and has nothing to do with Webpack.

Since the import statement will occur before the assignment to __webpack_public_path__, it (as well as all the imports that in turn would happen during the importing of that file) will happen before the public path has been updated.

Therefore, your desired behavior would require you to use require(). Anyone correct me if I'm wrong.

@harmony7 ohh, didn't even think that hoisting could be the root cause of that problem, thanks for the tip!

To have symmetry with the publicPath configuration, I would assume that webpack would read that line first before anything else. To achieve that kind of symmetry, I would guess that webpack would have to hoist __webpack_public_path__ to the top of the module after any loaders run (not sure what that might involve)

One way you can work around this (sort of) is like this:

main.js

import 'navbar/navbar.es6';
/* ... The rest of your program ...*/

entry.js

__webpack_public_path__ = SETTINGS.STATIC_URL + 'build/';
require('./main');

Use entry.js as your webpack entry point. If you want to use import everywhere else then you can; entry.js would be the only point in the code where you need a require().

@harmony7 yea that's what I'm currently doing (thanks for the suggestion though!), it's not the prettiest solution as it means I need to create separate files for each of my entrypoints that uses __webpack_public_path__. The broken symmetry with publicPath (and broken symmetry with require in a codebase that uses ES6 imports) is fairly unintuitive on top of that. It feels really hacky right now as I have 4 entrypoints.

Broken symmetry/intuition in build tools IMO warrants an eventual solution

@sokra (just a clarification) is that always guaranteed to work, or just a quirk of how webpack builds the imports?

I think this should be guaranteed by the ES6 spec.

I've found that you can load the public-path.js file in @sokra 's example by adding to the entry array in webpack.config.js. Then it's much less intrusive.

entry: ['./public-path.js', './entry.js']

Is it worth defining a plugin extension point to allow developers to reprogram how public paths are computed, for cases where the config file default isn't sufficient? I wanted this in the context of Aerobatic, where an HTML preprocessor outside of my control modifies my pages to add a CDN base URL as a global variable, well after webpack has finished running.

@ojacobson i bumped into the same problem and drafted this solution
https://github.com/agoldis/webpack-require-from
I needed to be able to switch webpack public path at runtime and fine tune how files are loaded from CDN. While you can override the __webpack_public_path__ manually, sometimes it isn't enough.

Am I wrong to think that this would be much simpler if publicPath could take a function?

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

window.webpack_public_path why not use

For anyone making a lib consumed by other app and who wants to set public path at runtime via options passed from consumer to lib, here is what i ended up doing

// entry file
export default options => {

    __webpack_public_path__ = options.publicPath || '/'

    const App = require('./app')

    return new App.default(options)

}

I've tried all this suggestion and others but none of them are working for me. I have a similar problem, where i need to load mu chunks from a different origin. Currently using CRA -create-react-app-, i have in my entry file:

index.js

import './src/containers/async/build';
import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import store from './store'
import App from './containers/app'

import './index.css'

const target = document.querySelector('#root');

render(
    <Provider store={store}>
        <React.Fragment>
            <App/>
        </React.Fragment>
    </Provider>,
    target
);

in src/containers/async/build.js

__webpack_public_path__ = 'http://my-server-assets.com';

Am i missing something?

@rrubiorr81 Did you solved it ?

// entry.js
import "./public-path.js"
import "app";

// public-path.js
__webpack_public_path__ = "..."

this is not working in my case. path is not setting for image and css files

Hi.
My name is Kirill Borodavkin.
I appied for this job on freelancer.com.
Looking forward to hearing from you.