title: Why does %PUBLIC_URL% not get replaced in Webpack bundled index.html?
body: <p>I am trying to deploy the front-end of my web application, but when I deploy to my hosting platform (currently AWS Amplify/S3) - no content displays on the <a href="https://master.d17t6864yni57e.amplifyapp.com/" rel="nofollow noreferrer">website</a></p>
  
  <p>I created the application using <code>create-react-app</code>, so the project structure follows their standard (<code>public</code>, <code>src</code> folders etc.).</p>
  
  <p>When I run the application locally it works fine.</p>
  
  <p>From the console errors, and looking at the <code>index.html</code> page that is generated by webpack, it looks like it is not replacing the <code>%PUBLIC_URL%</code> field that should be replaced with the public directory on build.</p>
  
  <p>Please can someone explain how to fix this issue?</p>
  
  <p>I have included my <code>webpack.config</code> file below and the full repo can be found <a href="https://github.com/georgefairbairn/portfolio-app" rel="nofollow noreferrer">here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  const config = {
    entry: ['react-hot-loader/patch', './src/index.js'],
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.svg$/,
          use: 'file-loader',
        },
        {
          test: /\.png$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                mimetype: 'image/png',
              },
            },
          ],
        },
        {
          test: /\.(ttf|eot|woff|woff2)$/,
          use: 'file-loader',
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      alias: {
        'react-dom': '@hot-loader/react-dom',
      },
    },
    devServer: {
      contentBase: './build',
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve('./public/index.html'),
      }),
    ],
  }
  
  module.exports = config</code></pre>
  </div>
  </div>
  </p>