reactjs - Cannot GET manifest.json react webpack

Question

I've been running a TS react app with WebPack and get an issue where it will not load manifest.json and so will not load the tab icon:

I have it set up with the typical react app structure where you have the default public folder with the favicon.ico, manifest.json, logo pngs, etc and then the src folder with the app as follows:

My-App
    dist/
    node_modules/
    public/
        favicon.ico
        index.html
        manifest.json
        robots.txt
        ...
    src/

Here's my webpack.config.json for reference:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const InterpolateHtmlPlugin = require('interpolate-html-plugin')
module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.tsx'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: "source-map",
  mode: "development",
  devServer: {
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, 'dist'),
    port: 3000
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx']
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        exclude: /node_modules/,
        use: ['ts-loader']
      },
      {
        test: /.s(a|c)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[local]'
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.html/,
        use: ['html-loader']
      },
      {
        test: /.(png|svg|jpg|jpeg|gif|ico)$/,
        exclude: /node_modules/,
        use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
      },
      {
        test: /.woff(2)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: './font/[hash].[ext]',
              mimetype: 'application/font-woff'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html'),
      filename: './index.html',
      manifest: "./manifest.json"
    }),
    // new InterpolateHtmlPlugin({
    //   PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
    // }),
  ]
};

As you can see I tried using the InterpolateHtml plugin but no matter what I did I would get this tap error as follows

[webpack-cli] TypeError: Cannot read property 'tap' of undefined
    at /home/myufa/home/personal/vibe-mill/frontend/node_modules/interpolate-html-plugin/index.js:35:63
    at Hook.eval [as call] (eval at create (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:988:26)
    at /home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:1029:29
    at Hook.eval [as callAsync] (eval at create (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.compile (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:1024:28)
    at /home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:471:12
    at Compiler.readRecords (/home/myufa/home/personal/vibe-mill/frontend/node_modules/webpack/lib/Compiler.js:866:11)
npm ERR! code ELIFECYCLE

This is my first time using Webpack so I'm not sure how to debug. Any help would be much appreciated!

Answer 1

等待大神答复