Webpack watch does not generate output on second change

Question

Setup

I use phaser.io with typescript to develop browser games. My Repo is set up like this one.

tsconfig:

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "CommonJS",
        "moduleResolution": "node",
        "sourceMap": true,
        "typeRoots": [
            "node_modules/@types",
            "node_module/phaser/types"
        ],
        "types": [
            "phaser"
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

webpack.config:

const path = require('path');
const debug = process.env.NODE_ENV !== 'production';

module.exports = {
  entry: './src/js/game.ts',
  mode: debug ? 'development' : 'production',
  watchOptions: {
    ignored: /node_modules/,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  output: {
    filename: 'game.js',
    path: path.resolve(__dirname, 'dist/js'),
    clean: true,
  },
};

Within src/js i got my .ts files. If i run webpack all my files get compiled to dist/js/game.js as expected.

Working part

For development i use VSCode with the 'Live Server' extension, i want webpack to compile on change. If i run webpack --watch first it works fine:

asset game.js 6.96 MiB [emitted] (name: main)
./src/js/game.ts 435 bytes [built] [code generated]
./node_modules/phaser/dist/phaser.js 6.5 MiB [built] [code generated]
./src/js/scenes/SceneGame.ts 667 bytes [built] [code generated]
webpack 5.36.2 compiled successfully in 2945 ms

When i make a change within src/js/scenes/sceneGame.ts and save for the first time i get:

asset game.js 6.96 MiB [emitted] (name: main)
cached modules 6.5 MiB [cached] 1 module
./src/js/game.ts 435 bytes [built] [code generated]
./src/js/scenes/SceneGame.ts 671 bytes [built] [code generated]
webpack 5.36.2 compiled successfully in 220 ms

Everything good so far.

Problem

For all further changes within src/js/scenes/sceneGame.ts i get

assets by status 6.96 MiB [cached] 1 asset
cached modules 6.5 MiB [cached] 3 modules
webpack 5.36.2 compiled successfully in 116 ms

The file dist/js/game.js is not changing anymore.

Any Ideas why webpack stops to write changes to the output?

Answer 1

I had the same problem. The cause was that the upper and lower case of the JS file from the source code was different from the actual file.

I think the actual file name is src/js/scenes/sceneGame.ts, but you wrote it like import SceneGame from './scenes/SceneGame'; in game.ts. (In my case, I wrote import Property from 'foo/bar/property'; where I needed Property.js from the source code.)