webpack --watch isn't compiling changed files

I tried running webpack --watch and after editing my JS files, it doesn't trigger an auto-recompilation.

I've tried reinstalling webpack using npm uninstall but it's still not working.

Any ideas?

98915 次浏览
小开

更新: 删除整个目录和 git 克隆重新从回购修复我的问题。

小开
最佳答案

顺便说一句: OS X 似乎有一个文件夹已经损坏，不再发送 fsevents(watchpack/chokidar/Finder 使用)本身和任何子文件夹。我不确定这是不是发生在你身上的事，但这让我和我的同事非常沮丧。

我们可以重命名损坏的父文件夹，然后按照预期立即查看事件。更多信息请看这篇博文: http://livereload.com/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders/

The recommended fixes from the above link are:

  • 重启电脑
  • 检查磁盘并通过磁盘工具修复权限
  • 将该文件夹添加到 Spotlight 隐私列表(不要索引的文件夹列表) ，然后从中删除，从而有效地强制进行重新索引
  • 重命名文件夹，然后可能重命名它回来
  • 重新创建文件夹并将旧内容移回其中

First two did not work for us, didn't try the Spotlight suggestion, and the re-creation did not prove necessary.

我们能够通过打开 Finder 并在每个连续的父文件夹中创建文件来找到根问题文件夹，直到有一个文件立即出现(因为 Finder 也会被这个 bug 弄得焦头烂额)。不更新的最根文件夹是罪魁祸首。我们只是把它恢复成原来的名字然后观察者就开始工作了。

不知道是什么导致了腐败，但我很高兴能解决这个问题。

小开

一个问题是，如果路径名不是绝对的，那么就会发生这样的事情。我不小心把 resolve.root设置成了 ./而不是 __dirname，这让我浪费了很多时间去删除和重新创建文件，就像我上面的那些家伙一样。

小开

如果你的代码没有被重新编译，尝试增加观察者的数量(在 Ubuntu 中) :

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Source: https://webpack.github.io/docs/troubleshooting.html

小开

只是为了增加可能的解决方案: 我把我的项目文件夹放在 Dropbox 文件夹里，把它移出来就解决了我的问题

小开

如果您使用 Vim，您应该尝试将 backupcopy 设置为 yes，而不是默认的 auto。否则，Vim 有时会重命名原始文件并创建一个新文件，这会给 webpack 手表带来麻烦:

Https://github.com/webpack/webpack/issues/781

Just add this to your vim settings if this is the case:

是的

小开

文件夹大小写敏感性是我的问题。我对 request ()的代码调用具有所有的小写路径名，但是实际的目录中有一个大写字母。我将所有的目录重命名为小写字母，并且 Webpack 观看立即起作用。

小开

如果像 César 指出的那样更改 fs.inotify.max _ user _ watch 仍然不起作用，尝试使用轮询代替本地观察者，方法是创建如 医生所示的脚本或运行带有 --watch --watch-poll选项的 webpack。

小开

MacOS 上的一个简单解决方案如下:

在项目所在的同一目录中打开两个终端窗口。

在第一个终端窗口中运行: webpack —— watch

In the second terminal windows run : webpack-dev-server

我已经尝试了许多可能的解决方案，这似乎是最可靠的

小开

我在与 WebStorm 合作时遇到过这个问题。

关闭 设定-> 系统设定-> 「安全写入」解决了我的问题。

找到这样做的建议: WebPack 故障排除

小开

可能的解决方案: 将 背景更改为 app 目录。

I had all my webpack config files in a sub folder:

components/
webpack/
development.js
app.js

在 webpack/development.js，设置 context: path.join(__dirname, '../')解决了我的问题。

小开

在尝试了一些解决这个问题的策略之后，我最终放弃了，但是在解决另一个问题的时候，我又尝试了一次，突然之间 --watch标志终于起作用了。

老实说，我不知道具体是什么使它工作，但在执行以下步骤后，它才开始工作:

1. Install most recent gcc version
$ sudo port install gcc48
$ sudo port select --set gcc mp-gcc48


2. Install most recent clang version
$ sudo port install clang-3.6
$ sudo port select --set clang mp-clang-3.6


3. Export variables holding the patch to C and C++ compiler
$ export CC=/opt/local/bin/clang
$ export CXX=/opt/local/bin/clang++

也许在安装这些软件包时，某些依赖性只是添加了这个难题中缺失的一部分，谁知道呢... ..。

希望这能帮助那些努力工作的人。

小开

请注意，如果您在虚拟机(Vagrant/Virtualbox)中运行 webpack，并在主机平台上更改文件，则共享文件夹中的文件更新可能不会在 Ubuntu 上触发 inotify。这将导致更改不被 webpack 检测到。

见: Virtualbox ticket #10660

在我的例子中，编辑和保存 de guest (vi)上的文件确实触发了 webpack。在主机上编辑它(在 PhpStorm，记事本或任何其他应用程序)不触发 webpack 无论我做什么。

我用 流浪汉通知解出来的。

小开

我增加了另一个答案，因为我相信这是迄今为止最好的解决方案。 我每天都在用它，它很棒！ 只要安装这个库:

Https://github.com/gajus/write-file-webpack-plugin

描述: 强制 webpack-dev-server 程序将捆绑包文件写入文件系统。

如何安装:

npm install write-file-webpack-plugin --save-dev
小开

我也有同样的问题。我注意到它没有编译，因为我的文件夹包含一些字符(*)。使用旧的观察者插件似乎解决了这个问题。 将这一行添加到您的 webpack 配置文件中。

plugins: [
new webpack.OldWatchingPlugin()
]
小开

我有类似的问题，既没有网络包或卷起在手表模式软件捕捉我所做的更改。我发现这基本上是我的错，因为我正在改变模块(。Tsx 文件) ，它还没有导入到应用程序的任何地方(例如 App.ts，它是入口点) ，我希望构建工具能够报告我在那里发生的错误。

小开

将以下代码添加到我的 webpack 配置文件中为我解决了这个问题。 不要忘记忽略 node _ Module 文件夹，因为这会影响 HMR (热模块替换)的性能:

watchOptions: {
poll: true,
ignored: /node_modules/
}
小开

我解决这个问题的方法是在导入路径中找到一个大写错误。文件系统上的文件夹有小写首字母，导入路径为大写。一切编译正常，所以这只是一个 webpack 手表包含的问题。

小开

我在一个.vue 文件中遇到了同样的问题。 当服务器重新启动时，一切正常，但是在下一次保存时就不再重新编译了。 问题出现在导入文件路径上，该路径有一个大写字母。很难解决这个问题，因为在服务器重启时一切都正常。检查路径的大小写。

小开

它不是为我重新编译，但后来我意识到/记起了 webpack 观察依赖关系图，而不仅仅是一个文件夹(或文件)。果然，我修改的文件还没有包含在那个图表中。

小开

为我删除 node_modules和做 npm 安装或纱线再次安装所有的包解决了问题

小开

在 Laravel Homestead 为我工作

--watch --watch-poll
小开

对我来说，在 VS Code 中创建文件夹和文件是个问题。为了解决这个问题，我重新克隆了我的回购文件，这次通过命令行而不是 Code 创建了新的文件夹和文件。我认为代码出于某种原因破坏了文件。我看到应用程序刚刚更新，所以可能是个新漏洞。

小开

问题是: webpack 从一些奇怪的 url: webpack:///缓存加载脚本。 您应该在脚本的末尾添加版本，以防止缓存: main-compiled.js?v=<?php echo time()?>"

小开

尝试将 --watch改为 -d --watch

对我有用

小开

在 VirtualBox (5.2.18) Ubuntu (18.04) VM 中使用 Vagrant (2.1.15)和 rsync 同步时也存在这个问题。突然之间，第一个 build 运行得非常好，但是 Webpack 不考虑之后的更改，即使设置了 fs.inotify.max_user_watches=524288。在 Webpack 的 config 中添加 poll: true也没有帮助。

只有 vagrant-notify-forwarder能正常工作(由于某种原因，流浪者-fstification 不能正常工作) ，但是在主机上保存文件之后，重建过程发生得太快了，我认为 rsync 没有足够的时间来完成它的任务(可能是由于我的流浪者文件中有大量的同步目录?).

最后，我通过增加 Webpack 配置中的 aggregateTimeout使手表重新工作:

module.exports = {
watch: true,
watchOptions: {
aggregateTimeout: 10000
},
...
}

如果此解决方案对您有效，请再次尝试降低此值，否则您将不得不等待10秒，直到每次按下保存时重新启动构建。默认值是 300毫秒。

小开

If this happened suddenly in your project, then this could fix the issue.

也许不知怎么的，跟踪你的项目变更的文件被损坏了。 您可以按照简单的步骤再次创建它们。

  1. ($: cd. .)
  2. 将项目移动到不同的目录($: mv { projectName }{ newName })
  3. 进入新目录($: cd { newName })
  4. 启动服务器并检查它是否在每次文件更改时重新加载(在大多数情况下应该可以工作，因为现在 webpack 创建了新的文件来监视更改)
  5. 从目录中出来($: cd. .)
  6. move it back to its original name ($: mv {newName} {projectNam}) 这招对我很管用。
小开

我遇到这个问题时，我有一个类似的问题-它似乎是没有重新包装，甚至在运行 webpack-config。

I even deleted bundle.js and the webpage was still displaying as before my edits.

对于那些遇到同样问题的人，我最后在 chrome 中使用了“ em null cache and hard reload”选项(在 devtools 打开的情况下右键单击 reload 按钮) ，并且做到了这一点

小开

我遇到了同样的问题，尝试了很多事情，最后 Chrome 清除浏览数据的 Mac为我工作。

这些模块已经安装:

“浏览器同步”: “ ^ 2.26.7”

“浏览器-同步-网络包-插件”: “ ^ 2.2.2”,

“ webpack”: “ ^ 4.41.2”

“ webpack-cli”: “ ^ 3.3.9”

小开

我的原因是什么:

看来值: max_user_watches 在 /proc/sys/fs/inotify/max_user_watches 正在影响 Webpack

检查你的实际价值

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 was in my case and it still wasnt enough.

我尝试了不同类型的解决方案，比如:

$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

但似乎即使我改变了值，当我重新启动我的电脑时，它也会回到默认值16384。

解决方案如果你有 Linux 操作系统(我的情况，我有 Manjaro) :

创建文件:

sudo nano /etc/sysctl.d/90-override.conf

并用以下方式填充:

fs.inotify.max_user_watches=200000

看来200000对我来说足够了。

创建文件并添加值之后，只需重新启动 PC 就可以了。

小开

Problem was in distiction between .js and .ts files. Why ?

在项目构建时，VisualStudio 将类型脚本文件编译成. js 和. js.map。 这是完全没有必要的，因为 webpack 也可以处理类型脚本文件(使用很棒的类型脚本加载器)。编辑组件时。使用 VisualStudio 代码中的 tsx 文件或 tsconfig.json 中禁用的 编译保存选项，编辑的 ts 文件不会重新编译，我的 webpack 处理的是非实际的。Js 文件。

解决方案是在项目生成时禁用在 VisualStudio 中编译打印脚本文件

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

在. csproj 的 PropertyGroup 中。


提交答案