Template variables not being replaced when publicPath is not "/" #1146
Description
Expected behaviour
I opened a bug for facebook/create-react-app#6280, but upon review I'm thinking the issue is more with this plugin.
tldr; Changing publicPath from / to /whatever/ breaks %PUBLIC_HTML% replacement:
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index 2a2128e..f0f14b8 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -72,7 +72,7 @@ module.exports = function(proxy, allowedHost) {
// ❌ /whatever/static/js/bundle.js doesn't work
// ✅ /static/js/bundle.js still does
// 🤔 Changing this to /whatever prevents %PUBLIC_URL% from being replaced!?
- publicPath: '/',
+ publicPath: '/whatever/',
// WebpackDevServer is noisy by default so we emit custom message instead
// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
quiet: true,Current behaviour
The HTML remains untouched:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>(Whereas with publicPath: "/" in the webpack-dev-server, %PUBLIC_URL% is replaced correctly! Although the files aren't served because the public path should be /whatever/)
Environment
Tell us which operating system you are using, as well as which versions of Node.js, npm, webpack, and html-webpack-plugin. Run the following to get it quickly:
Node.js v10.13.0
darwin 18.2.0
6.4.1
4.0.0-beta.5
Config
See facebook/create-react-app#6280 to reproduce
Relevant Links
Additional context
Add any other context about the problem here.