__webpack_public_path__ does not work? #6024

xsteadybcgo · 2018-12-12T03:11:10Z

Is this a bug report?

yes

I want to set html files assetsPath in dist directory produced by htmlwebpackplugin at runtime, so I tried to figure out __webpack_public_path__ = "http://cdn.mydomain.com instead of setting publicUrl , but it doesnot work at all。 how can i set publicPath at runtime ? does not webpack_public_path support in CRA?

The text was updated successfully, but these errors were encountered:

ianschmitz · 2018-12-12T03:22:35Z

Can you be more specific about what you're trying to accomplish? It sounds like PUBLIC_URL is really what you're after.

xsteadybcgo · 2018-12-12T04:20:34Z

Can you be more specific about what you're trying to accomplish? It sounds like PUBLIC_URL is really what you're after.

I konw the PUBLIC_URL works well when i want to set cdn path to script & link tags in html files produced by htmlwebpackplugin，the reason why i change to use webpack_public_path is that:
As webpack doc says:

In cases where the eventual publicPath of output files isn't known at compile time, it can be left blank and set dynamically at runtime via the webpack_public_path variable in the entry point file: __webpack_public_path__ = myRuntimePublicPath;

Why i want webpack_public_path instead of publicPath( PUBLIC_URL ) is that i want to set dynamically at runtime 。 I enconter a react-snap#issue-182410449
using react-snap 。 The vue project can hack that by using webpack_public_path ，I was depressed that it doen not work in CRA。

my code example ：

src/index.html

`
import './publicPath'
import './publicPath'
import 'react-app-polyfill/ie9'
import 'raf/polyfill';
import React from 'react';
...

src/publicPath.js

// eslint-disable-next-line __webpack_public_path__ = "http://tcdn.2dubao.com/website"

but the output file is not in my expectation :

<html><link href="/static/css/6.954517dd.chunk.css" rel="stylesheet"></html>

i expect it can be build like:

<html><link href="http://tcdn.2dubao.com/website/static/css/6.954517dd.chunk.css" rel="stylesheet"></html>

ianschmitz · 2018-12-12T06:21:20Z

In your example are you showing us the outputted index.html? Or are you showing a lazy loaded css chunk that is injected at runtime?

xsteadybcgo · 2018-12-12T10:42:47Z

In your example are you showing us the outputted index.html? Or are you showing a lazy loaded css chunk that is injected at runtime?

Here is my repository ，npm run prod && npm run snapbuild , then checkout the build directorty, the script and link tags in html files does not contain my cdn path (defined in /src/publicPath.js using __webpack_public_path__ )

ianschmitz · 2018-12-13T03:30:38Z

Gotcha. Thanks for the repository.

I think there may be some confusion between publicPath in the webpack config, versus __webpack_public_path__ which is used at runtime. I'll do my best to clear things up based on my knowledge of the two.

publicPath is used during the webpack build to help construct URLs to your assets, whether it be for loading your lazy loaded chunks via dynamic import(), or via HtmlWebpackPlugin to configure the urls to your entrypoint .js and .css for example. If you were to set PUBLIC_URL in CRA, it will internally configure the webpack publicPath, such that if you gave it an absolute URL to a CDN for example, HtmlWebpackPlugin would use this absolute URL to prefix our .js and .css files in index.html.

__webpack_public_path__ allows you to configure the webpack asset loader to tweak the publicPath at runtime. So for example if you left publicPath alone, CRA will default to the root of the host (/). So requests to load a lazy chunk would be loaded from /static/js/foo.abc123.js for example. However you can set __webpack_public_path__ in the entry point of your app, so that from that time forward in your application lifecycle, any asset requests would use __webpack_public_path__ as the prefix. So if you set __webpack_public_path__ = https://bar.com, then the chunk would be requested from https://bar.com/static/js/foo.abc123.js. You're essentially telling the webpack asset loader:

Hey i know i told you during the build that you should prefix requests with /, but i'm telling you that from this point forward instead prefix the requests with https://bar.com

Does that help clear things up?

xsteadybcgo · 2018-12-13T05:44:47Z

@ianschmitz thank you for you patience，it was not a CRA issue but my misunderstanding , now i can fix my project by adding a webpack plugin。 thanks a lot , thank you !!! 😄

xsteadybcgo closed this as completed Dec 13, 2018

lock bot locked and limited conversation to collaborators Jan 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

__webpack_public_path__ does not work? #6024

__webpack_public_path__ does not work? #6024

xsteadybcgo commented Dec 12, 2018 •

edited

ianschmitz commented Dec 12, 2018

xsteadybcgo commented Dec 12, 2018 •

edited

ianschmitz commented Dec 12, 2018

xsteadybcgo commented Dec 12, 2018

ianschmitz commented Dec 13, 2018 •

edited

xsteadybcgo commented Dec 13, 2018

__webpack_public_path__ does not work? #6024

__webpack_public_path__ does not work? #6024

Comments

xsteadybcgo commented Dec 12, 2018 • edited

Is this a bug report?

ianschmitz commented Dec 12, 2018

xsteadybcgo commented Dec 12, 2018 • edited

src/index.html

src/publicPath.js

but the output file is not in my expectation :

i expect it can be build like:

ianschmitz commented Dec 12, 2018

xsteadybcgo commented Dec 12, 2018

ianschmitz commented Dec 13, 2018 • edited

xsteadybcgo commented Dec 13, 2018

xsteadybcgo commented Dec 12, 2018 •

edited

xsteadybcgo commented Dec 12, 2018 •

edited

ianschmitz commented Dec 13, 2018 •

edited