Webpack watch 不会在第二次更改时生成输出 设置工作部分问题

编程问答 2022-05-02

问题描述

设置

我使用带有 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。

工作部分

对于开发，我将 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 停止将更改写入输出吗？

解决方法

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

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

phaser-frameworktypescripttypescripttypescriptwebpackwebpackwebpack