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

【问题标题】：Webpack watch does not generate output on second changeWebpack watch 在第二次更改时不生成输出
【发布时间】：2021-07-31 03:30:38
【问题描述】：

设置

我使用带有 typescript 的 Phaser.io 来开发浏览器游戏。我的回购设置为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。

工作部分

对于开发，我使用带有“Live Server”扩展的 VSCode，我希望 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 停止将更改写入输出？

【问题讨论】：

尝试将"poll":true 添加到您的watchOptions；有时 webpack 观察文件系统变化的默认方式并不能始终如一地工作。
感谢您的建议，遗憾的是没有变化。我认为 webpack 确实注册了文件更改，因为每次我保存文件时都会获取：assets by status 6.96 MiB [cached] 1 asset cached modules 6.5 MiB [cached] 5 modules webpack 5.36.2 compiled successfully in 198 ms 它只是停止构建输出文件。
我也有同样的问题。关闭缓存会有所帮助，但会使每次重建都像初始构建一样慢。

标签： typescript webpack phaser-framework

【解决方案1】：

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

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

【讨论】：