Webpack not emitting files to index.html when using dev server

Question

I have been trying to setup webpack and react with typescript without the CRA jargon. The dev server doesn't emit the files to the index.html file to be viewed in the browser. The CRA template on eject has multiple js scripts for building and development mode but I want to omit that and keep the structure as clean and simple as possible

Package.json-

  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  }

The webpack config-

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const HtmlWebpackChangeAssetsExtensionPlugin = require('html-webpack-change-assets-extension-plugin')

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src/index.tsx')
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].[hash].chunk.js',
    publicPath: '/codestage'
  },

  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  module: {
    strictExportPresence: true,
    rules: [
      {
        test: /\.js$/,
        loader: require.resolve('babel-loader'),
        exclude: /node_modules/,
        options: {
          compact: true
        }
      },
      {
        test: /\.tsx?$/,
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      },

      { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      jsExtension: '.gz',
      filename: './index.html'
    }),
    new CompressionPlugin({
      test: /\.js(\?.*)?$/i,
      deleteOriginalAssets: true
    }),
    new ForkTsCheckerWebpackPlugin({ eslint: true }),
    new HtmlWebpackChangeAssetsExtensionPlugin()
  ],

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          reuseExistingChunk: true,
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial'
        }
      }
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

The directory structure-

Html inspect in browser-

How to solve this?

It is not clear the problem is. What files are you expecting to be emitted that are not? — kevzettler

Asurance Asurance · Accepted Answer · 2020-03-14T14:41:20

Actually,dev server is a tool to develop and debug.Everything is built in memory.You can try npm run build script to emit files that can be used to deploy.

Webpack not emitting files to index.html when using dev server

1 Answers