【发布时间】：2014-12-29 18:04:13
【问题描述】：
我尝试运行webpack --watch，在编辑我的 JS 文件后，它不会触发自动重新编译。
我尝试使用npm uninstall 重新安装webpack，但仍然无法正常工作。
有什么想法吗？
【问题讨论】：
标签： javascript webpack fsevents
【发布时间】：2014-12-29 18:04:13
【问题描述】：
如果您的代码没有被重新编译，请尝试增加观察者的数量（在 Ubuntu 中）：
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
【讨论】：
-
sudo sysctl -p不适用于 Mavericks。有什么新想法吗？ -
There is a current problem with Webpack 3 and
ModuleConcatenationPlugin。省略ModuleConcatenationPlugin允许继续观看。 -
@SimonH 尝试直接查看和更改
/etc/sysctl.conf？改变相应。设置那个键值？ （如果你找不到应用 ad-hoc (sysctl -p) 的命令，那么它只是一次重启，你应该很好......） -
我建议之前检查一下手表的数量，以确保它没有增加（给你一个想法，如果这可能解决问题）：即@987654329 @
-
这解决了我在 Chromebook 上运行 chroot (Ubuntu) 时遇到的问题
仅供参考：似乎 OS X 可能有一个文件夹损坏并且不再为自己和任何子文件夹发送fsevents（watchpack/chokidar/Finder 使用）。我不能确定这就是发生在你身上的事情，但这让我和一位同事感到非常沮丧。
我们能够重命名损坏的父文件夹，然后立即按预期观看事件。有关更多信息，请参阅此博客文章：http://livereload.com/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders/
上述链接中推荐的修复方法是：
- 重新启动计算机
- 通过磁盘工具检查磁盘并修复权限
- 将文件夹添加到 Spotlight 隐私列表（不索引的文件夹列表），然后从中删除，从而有效地强制重新索引
- 重命名文件夹，然后可能将其重命名
- 重新创建文件夹并将旧内容移回其中
前两个对我们不起作用，没有尝试 Spotlight 建议，并且证明没有必要重新创建。
我们能够通过打开 Finder 并在每个连续的父文件夹中创建文件直到立即出现一个文件来找到根问题文件夹（因为 Finder 也会被这个错误所困扰）。不更新的最根文件夹是罪魁祸首。我们只是 mv'd 和 mv'd 恢复原来的名称，然后观察者工作。
不知道是什么导致了损坏，但我很高兴能够修复。
【讨论】：
-
我将 ~/Sites 文件夹重命名为其他文件夹，然后返回 ~/Sites 并修复了错误。它还修复了其他项目上的其他几个错误。谈论用 1 块石头杀死 2 只鸟。非常感谢！！！
-
不是 100% 确定这是原因，但是在尝试运行 watchify 时关闭我的 Dropbox 同步客户端对我有用。运行
npm install以及重命名目录都是同步客户端实现方式非常密集的操作。 -
有一个current issue with webpack 3 and the ModuleConcatenationPlugin 可以防止监视文件更改。省略它似乎可以让它工作。
-
从 2017 年开始，这个答案仍然把我从地狱中救了出来！一直以为我的 webpack 配置错了！
-
你真的救了我的命
将以下代码添加到我的 webpack 配置文件为我解决了这个问题。 不要忘记忽略您的 node_modules 文件夹，因为这会影响 HMR（热模块更换）的性能：
watchOptions: {
poll: true,
ignored: /node_modules/
}
【讨论】：
-
@Lokesh webpack 可以监视文件并在它们更改时重新编译。观看模式默认关闭，所以
watch: true也可以工作。轮询是一个程序或设备不断检查其他程序或设备，以查看它们处于什么状态，通常是查看它们是否仍然连接或想要通信。所以设置poll: true允许 webpack 检查你的程序的状态，看看是否有任何改变，或者至少是我假设的情况。 -
链接文档：
poll选项由 watchpack 定义 -
重命名并重新启动后，这对我有用（osx）。赞！
-
它也适用于 Ubuntu 20.04 LTS 的 MacOS Monterey 和 Vagrant。谢谢。
【讨论】：
-
谢谢！问题出在 PhpStorm 上真的不明显！
只是为了添加可能的解决方案： 我的项目文件夹位于 Dropbox 文件夹中，将其移出解决了我的问题。 (OS X)
【讨论】：
-
这对我也有用——我希望这个答案更接近顶部。 OS X 也适合我（El Capitan）。
-
这也解决了我的问题。谢谢！
-
你知道为什么会这样吗？ @Les
文件夹区分大小写是我的问题。我对 require() 的代码调用具有所有小写路径名，但实际目录中有一个大写字母。我将所有目录重命名为小写，webpack 观看立即生效。
【讨论】：
-
这不应该被否决，它对我有用。我花了一段时间才意识到这个问题，因为我的应用程序仍在正常运行，但实时重新加载特别注意区分大小写。
-
如果您将项目从 Windows 迁移到 Mac，这可能是一个真正的问题。谢谢！
-
这里有同样的问题。好像导入文件是不区分大小写的，但是如果路径名和文件系统完全一样，看会失败
一个问题是，如果您的路径名称不是绝对的，那么就会发生这样的事情。我不小心将resolve.root 设置为./ 而不是__dirname，这导致我浪费了大量时间删除和重新创建文件，就像我上面的人一样。
【讨论】：
更新：删除整个目录并从 repo 重新克隆 git 解决了我的问题。
【讨论】：
-
但这一定是有原因的
-
这个解决方案对我也很有效。看起来像一些资源阻塞。第一次重新加载已在控制台输出中完成，但 bundle.js 未更新。在第二次重新加载时，它卡在“正在单独的进程中开始检查......”。
如果按照 César 的指示更改 fs.inotify.max_user_watches 仍然不起作用，请尝试通过创建 docs 中所示的脚本或使用 --watch --watch-poll 选项运行 webpack 来使用轮询而不是原生观察者。
【讨论】：
请注意，如果您在虚拟机（Vagrant / Virtualbox）中运行 webpack，并在主机平台上更改文件，则共享文件夹中的文件更新可能不会在 Ubuntu 上触发 inotify。这将导致 webpack 无法获取更改。
在我的例子中，在 de guest（在 vi 中）上编辑和保存文件确实触发了 webpack。在主机上编辑它（在 PhpStorm、记事本或任何其他应用程序中）无论我做什么都不会触发 webpack。
我使用vagrant-fsnotify 解决了这个问题。
【讨论】：
-
虽然我使用
vagrant-notify-forwarder来获得更多魔法重载 -
vagrant plugin install vagrant-notify-forwarder为我做了一个永久的解决方案
在 Laravel Homestead 为我工作
--watch --watch-poll
【讨论】：
-
这在 Ubuntu 中对我有用（在非标准文件系统中）
如果您使用 Vim，您应该尝试将 backupcopy 设置为 yes 而不是默认的 auto。否则 Vim 有时会重命名原始文件并创建一个新文件，这会弄乱 webpack watch：
https://github.com/webpack/webpack/issues/781
如果是这种情况，只需将其添加到您的 vim 设置中：
设置备份复制=是
【讨论】：
我在 .vue 文件上遇到了同样的问题。 当服务器重新启动时一切正常，但在下一次保存时它不再重新编译。 问题出在一个字母大写的导入文件路径上。很难解决这个问题，因为一切都在服务器重新启动时起作用。检查路径的大小写。
【讨论】：
-
谢天谢地，我终于知道了。我有这个完全相同的问题（更改了文件名中的大写字母）
-
在逐一尝试了这些答案之后，我终于找到了这个答案，发现了一个应该是大写的字母。改变它，它的工作！
它并没有为我重新编译，但后来我意识到/记得 webpack 监视依赖关系图，而不仅仅是一个文件夹（或文件）。果然，我正在更改的文件还不是该图表的一部分。
【讨论】：
我遇到了类似的问题，webpack 或 watch 模式下的汇总都没有捕捉到我所做的更改。我发现这基本上是我的错，因为我正在更改尚未在应用程序的任何地方导入的模块（.tsx 文件）（例如作为入口点的 App.ts），我期待构建工具报告错误我在那里制作的。
【讨论】：
-
我开始使用该文件，将其导入到打算使用的位置。
-
很高兴指出！哦，天哪，我怎么能忘记这一点。我需要登录才能在这里发表评论说谢谢:)
对我来说，在 VS Code 中创建文件夹和文件是个问题。为了解决这个问题，我重新克隆了我的 repo，这一次，通过命令行而不是 Code 创建了新的文件夹和文件。我认为代码由于某种原因损坏了文件。我看到应用程序刚刚更新，所以可能是一个新错误。
【讨论】：
我解决问题的方法是在导入路径中发现大写错误。文件系统上的文件夹首字母小写，导入路径大写。一切都编译得很好，所以这只是一个 webpack watch 包含问题。
【讨论】：
在使用带有 rsync 同步的 Vagrant (2.1.15) 的 VirtualBox (5.2.18) Ubuntu (18.04) VM 中也存在此问题。突然之间，第一次构建运行良好，但 Webpack 没有考虑到之后的变化，即使设置了fs.inotify.max_user_watches=524288。在 Webpack 配置中添加 poll: true 也没有帮助。
只有 vagrant-notify-forwarder 工作（vagrant-fsnotify 没有，出于某种原因），但是在将文件保存到主机后重建发生得太快了，我想 rsync 没有有足够的时间来完成它的任务（可能是由于我的 Vagrantfile 中同步目录的数量？）。
最后我通过在我的 Webpack 配置中增加 aggregateTimeout 使手表再次工作：
module.exports = {
watch: true,
watchOptions: {
aggregateTimeout: 10000
},
...
}
如果此解决方案适合您，请尝试再次降低此值，否则您必须等待 10 秒，直到每次点击保存时重新启动构建。默认值为300 ms。
【讨论】：
我的情况是什么原因：
好像值：max_user_watches
在/proc/sys/fs/inotify/max_user_watches
正在影响 webpack
检查你的实际价值
$cat /proc/sys/fs/inotify/max_user_watches
16384
16384 在我的情况下仍然不够。
我尝试了不同类型的解决方案，例如：
$ 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 就可以了。
【讨论】：
我也有同样的问题。而且我注意到它没有编译，因为我的文件夹包含一些字符（*）。并且使用旧的 watcher 插件似乎可以解决这个问题。 将此行添加到您的 webpack 配置文件中。
plugins: [
new webpack.OldWatchingPlugin()
]
【讨论】：
对我来说，删除 node_modules 并再次执行 npm install 或 yarn 以安装所有软件包解决了问题
【讨论】：
MacOS 上的简单解决方案如下：
在您的项目所在的同一目录中打开两个终端窗口。
在第一个终端窗口运行：webpack --watch
在第二个终端窗口中运行：webpack-dev-server
我尝试了许多可能的解决方案，这似乎是最可靠的
【讨论】：
-
PS：我使用的是 Mac OS Sierra。
-
这是针对同一问题的两种完全不同的解决方案，您可能不应该并行运行它们。
webpack --watch编译项目并将文件保存到磁盘，相当于每次保存后运行webpack。webpack-dev-server是一个开发工具，它编译到内存并通过 http 将内容作为服务提供。在任何情况下，您的建议都不是解决方案，因为只要webpack --watch不能像宣传的那样工作，编译的文件就不会写入磁盘..
可能的解决方案：将 context 更改为应用目录。
我所有的 webpack 配置文件都放在一个子文件夹中：
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++
在安装这些包时可能发生了一些依赖，只是添加了缺失的部分，谁知道...
希望这可以帮助任何努力使其工作的人。
【讨论】：
我正在添加另一个答案，因为我相信这是迄今为止最好的解决方案。 我每天都在使用它，它摇滚！ 只需安装这个库：
https://github.com/gajus/write-file-webpack-plugin
说明： 强制 webpack-dev-server 程序将 bundle 文件写入文件系统。
如何安装：
npm install write-file-webpack-plugin --save-dev
【讨论】：
尝试将--watch 更改为-d --watch
为我工作
【讨论】：
如果您的项目中突然发生这种情况，那么这可以解决问题。
也许 Webpack 查找的跟踪项目更改的文件以某种方式损坏了。 您只需按照简单的步骤即可再次创建它们。
- 从你的项目目录中出来。 ($: cd ..)
- 将您的项目移动到不同的目录 ($: mv {projectName} {newName})
- 进入新目录 ($: cd {newName})
- 启动服务器并检查它是否在每次文件更改时重新加载（它应该在大多数情况下工作，因为现在 webpack 会创建新文件来监视更改）
- 从目录中出来（$: cd ..）
- 将其移回原来的名称 ($: mv {newName} {projectNam}) 这对我有用............
【讨论】：
我在遇到类似问题时遇到了这个问题——看起来 webpack 没有重新打包，即使在运行 webpack --config 时也是如此。
我什至删除了 bundle.js，网页仍然像我编辑之前一样显示。
对于那些遇到同样问题的人，我终于在 chrome 中做了“空缓存和硬重新加载”选项（在打开开发工具的情况下右键单击重新加载按钮）并做到了这一点
【讨论】：
我遇到了同样的问题，尝试了很多方法，最后 Mac 上的 Chrome 清除浏览数据 对我有用。
这些模块已安装：
“浏览器同步”：“^2.26.7”，
"browser-sync-webpack-plugin": "^2.2.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
【讨论】：
问题在于 .js 和 .ts 文件之间的区别。为什么？
在项目构建时，Visual Studio 将 typescript 文件编译为 .js 和 .js.map。 这是完全没有必要的，因为 webpack 也处理 typescript 文件（使用 awesome-typescript-loader）。在 Visual Studio Code 中编辑组件 .tsx 文件或在 tsconfig.json 中禁用 compileOnSave 选项时，编辑的 ts 文件不会重新编译，我的 webpack 正在处理不实际的 .js 文件。
解决方案是在项目构建时禁用在 Visual Studio 中编译打字稿文件。添加
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
在 .csproj 的 PropertyGroup 中。
【讨论】：