Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

192
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda