Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

190
Views
Webpack server replaces all file contents with index.html

I stumbled upon strange behavior using Webpack 5. When I build for production everything works as expected. But when I try to start a dev server, all my assets and .js files get replaced with the content of index.html. Therefore, I get an error of unexpected token "<", when the browser tries to parse a .js file. In other words, all files are at their place, but they contain nothing but HTML markup. Here's my output configuration:

output: {
      path: path.resolve(__dirname, 'build'),
      pathinfo: !isProd,
      filename: isProd ? 'static/js/[name].[contenthash:8].js' : 'static/js/bundle.js',
      chunkFilename: isProd ? 'static/js/[name].[contenthash:8].chunk.js' : 'static/js/[name].chunk.js',
      assetModuleFilename: 'static/media/[name].[hash][ext]',
      publicPath: process.env.PUBLIC_URL || './',
    },

Resolve:

resolve: {
      modules: ['node_modules'],
      extensions: ['.js', '.ts', '.tsx', '.json', '.jsx'],
      alias: {
        src: path.resolve(__dirname, 'src'),
      },
    },

And plugins part:

plugins: [
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: path.resolve(__dirname, './public/index.html'),
          },
          isProd
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined,
        ),
      ),
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].[contenthash:8].css',
        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
      }),
      new webpack.DefinePlugin({
        REACT_APP_API: `"${process.env.REACT_APP_API}"`,
        REACT_APP_BASENAME: `"${process.env.REACT_APP_BASENAME}"`,
        PUBLIC_URL: `"${process.env.PUBLIC_URL || '.'}"`,
      }),
      // new BundleAnalyzerPlugin(),
    ],

I don't event have an idea what to start with. Would appreciate if anyone could help me out on that.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!