Laravel Mix监听模式下无限构建循环问题求助

问题场景 #

我在Xubuntu 18.04系统下使用PhpStorm 2020.1，基于全新安装的Laravel 6.18.8开发一款JS游戏。每次执行npm run watch或npm run watch-poll时，资源都会陷入无限重复构建的循环。

我的依赖配置如下（package.json）：

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.4.1",
    "cross-env": "^7.0",
    "fibers": "^4.0.2",
    "jquery": "^3.5.0",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "node-sass": "^4.13.1",
    "pixi.js": "^5.2.1",
    "popper.js": "^1.16.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.15.2",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.11"
}

webpack.mix.js配置：

mix
    .copyDirectory('resources/images', 'public/images')
    .sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js')
    .extract(['lodash', 'popper.js', 'jquery', 'bootstrap', 'axios', 'pixi.js'])
    .version(['public/images'])
    .sourceMaps();

排查过程 #

1. 首先尝试了社区常见的修改processCssUrls选项的方案，但没有效果——因为我的应用图片并未在任何SCSS文件中引用，排除了URL重写的问题。
2. 为了定位触发构建的文件，我编写了一个自定义webpack插件：

class WatchRunPlugin {
    apply(compiler) {
        compiler.hooks.watchRun.tap('WatchRun', (comp) => {
            let mtimes = comp.watchFileSystem.watcher.mtimes;
            let changes = Object.keys(mtimes);
            if (changes.length) {
                changes = changes.map(file => ` ${file} (${mtimes[file]})\n`).join('');
                console.log(`CHANGES:\n${changes}`);
            }
        });
    }
}

通过这个插件发现，每次构建都是/public/mix-manifest.json的时间戳更新触发的。
3. 尝试在webpack配置中忽略该文件：

mix.webpackConfig({
    watchOptions: {
        ignored: ['public/mix-manifest.json']
    }
})

但这个方法也没能解决问题。
4. 我还逐个移除了webpack.mix.js中的构建任务，无论保留哪些任务，无限循环的问题依然存在。

根因与解决方案 #

最后我才意识到，自己曾在游戏脚本中直接导入了public/mix-manifest.json，想把它用作游戏的资源清单。这就形成了一个死循环：

• Laravel Mix构建完成后更新mix-manifest.json
• webpack检测到这个被导入的文件发生变化，触发新一轮构建
• 新的构建再次更新mix-manifest.json，循环往复

解决方法很简单：改用专门的游戏资源清单管理方式，不再直接导入mix-manifest.json，切断这个触发循环的链条。问题立刻就解决了。

内容的提问来源于stack exchange，提问作者bgaze