设置
我使用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停止将更改写入输出?
watchOptions
中添加"poll":true
; 有时候webpack默认的观察文件系统变化的方式并不总是有效。 - Magnuscached modules 6.5 MiB [cached] 5 modules webpack 5.36.2 compiled successfully in 198 ms``` 只是停止了构建输出文件。
- apfelschnitz