带有React Hot loader的publicPath

Question

I'm not quite sure what the publicPath in webpack does. Specifically, output.publicPath . In the github docs, I see this

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

The output.path from the view of the Javascript / HTML page.

For reactjs hot loading, I have

output: {
        path: path.resolve('./public/bundle/'),
        // path: './public/bundle',
        filename: 'main.js',
        // Webpack dev server is bound to port 8080, we have to force use of absolute URL, using the publicPath property
        publicPath: 'http://localhost:8080/public/bundle/'
    },

Does this mean that the built webpack files ( main.js ) is placed in my dev-server http://localhost:8080/public/bundle/ ?

Answer 1

Yep, Webpack needs to know where you'll host the generated bundle file (or any other assets it generates) so that it can request additional chunks or files that are loaded from file-loader or url-loader. Hence in this case, when you start your webpack-dev-server, you'll be able to access your bundle file at: http://localhost:8080/public/bundle/main.js (any related assets like images, commonchunk, fonts, etc will be under that path)

Outside of dev-server, you can use it to define the location of your assets (from a custom directory or even a CDN)