typescript - Webpack izleme, ikinci değişiklikte çıktı üretmiyor

Kurulum

Tarayıcı oyunları geliştirmek için typescript ile phaser.io kullanıyorum. Depom bu şekilde kurulmuş.

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,
  },
};

src/js içinde .ts dosyalarım var. webpack çalıştırırsam tüm dosyalarım beklendiği gibi dist/js/game.js olarak derleniyor.

Çalışan parça

Geliştirme için VSCode'u 'Live Server' eklentisi ile kullanıyorum, webpack'in değişiklikte derlemesini istiyorum. Eğer önce webpack --watch çalıştırırsam, sorunsuz çalışıyor:

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

src/js/scenes/sceneGame.ts içinde bir değişiklik yaptığımda ve ilk kez kaydettiğimde şu sonucu alıyorum:

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

Şimdiye kadar her şey yolunda.

Problem

src/js/scenes/sceneGame.ts içindeki tüm diğer değişiklikler için alıyorum

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

Dosya dist/js/game.js artık değişmiyor.

Webpack'in değişiklikleri çıktıya yazmayı neden durdurduğuna dair herhangi bir fikriniz var mı?

Cevap #1

Ben de aynı problemi yaşadım. Sorunun nedeni, kaynak koddaki JS dosyasının büyük ve küçük harflerinin gerçek dosyadan farklı olmasıydı.

Sanırım gerçek dosya adı src/js/scenes/sceneGame.ts, ama sen game.ts içinde import SceneGame from ''./scenes/SceneGame'; şeklinde yazmışsın. (Benim durumumda ise, kaynak koddan ihtiyacım olan Property.js için import Property from 'foo/bar/property'; yazmıştım.)

İlgili makaleler