Webpack监视器在第二次更改时不生成输出。

Question

设置

我使用typescript和phaser.io来开发浏览器游戏，我的代码库的设置与这个类似。

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停止将更改写入输出？

- apfelschnitz

---

尝试在watchOptions中添加"poll":true; 有时候webpack默认的观察文件系统变化的方式并不总是有效。 - Magnus

感谢您的建议，但很遗憾没有改变。我认为webpack确实会注册文件更改，因为每次我保存一个文件时，我都会得到以下信息：cached modules 6.5 MiB [cached] 5 modules webpack 5.36.2 compiled successfully in 198 ms``` 只是停止了构建输出文件。 - apfelschnitz

我有完全相同的问题。关闭缓存可以帮助，但会使每次重建都像初始构建一样慢。 - Vic

Answer 1

我曾经遇到过同样的问题，原因是源代码中JS文件的大小写与实际文件不同。

我认为实际文件名应该是src/js/scenes/sceneGame.ts，但你在game.ts中像这样写：import SceneGame from './scenes/SceneGame';。（在我的情况下，我需要从源代码中获取Property.js，但我却写成了import Property from 'foo/bar/property';）

- datakun