Webpack watch 不会在第二次更改时生成输出

Question

设置

我使用 phaser.io 和打字稿来开发网页游戏。我的 Repo 设置为 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,
  },
};

在 src/js 内，我得到了我的 .ts 文件。如果我运行 webpack 我的所有文件都按预期编译为 dist/js/game.js。

工作部分

为了开发，我使用 VSCode 和 'Live Server' 扩展名，我希望 webpack 在更改时进行编译。如果我运行 webpack --watch 首先它工作正常：

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 内进行更改并第一次保存时，我得到：

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

到目前为止一切都很好。

问题

对于 src/js/scenes/sceneGame.ts 内的所有进一步更改，我得到

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

文件 dist/js/game.js 不再更改。

知道为什么 webpack 停止向输出写入更改吗？

Answer 1

我遇到了同样的问题。原因是源码中的JS文件大小写与实际文件不一致

我认为实际的文件名是src/js/scenes/sceneGame.ts，但你在game.ts中写成import SceneGame from './scenes/SceneGame';。（就我而言，我在源代码中需要 Property.js 的地方写了 import Property from 'foo/bar/property';。）

Webpack watch 不会在第二次更改时生成输出

Webpack watch does not generate output on second change

typescript

phaser-framework

webpack

设置

工作部分

问题