webpack --watch不会编译已更改的文件

时间：2014-11-03 05:17:25

标签： javascript webpack fsevents

我尝试运行webpack --watch并在编辑了我的JS文件之后，它没有触发自动重新编译。

我已尝试使用webpack重新安装npm uninstall，但它仍无效。

有什么想法吗？

30 个答案:

答案 0 :(得分：74)

如果您的代码没有被重新编译，请尝试增加观察者的数量（在Ubuntu中）：

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

来源：https://webpack.github.io/docs/troubleshooting.html

答案 1 :(得分：62)

仅供参考：似乎OS X可能会损坏文件夹，并且不再为自己和任何子文件夹发送fsevents（watchpack / chokidar / Finder使用）。我无法确定这是发生在你身上的事情，但这对我和同事来说非常令人沮丧。

我们能够重命名损坏的父文件夹，然后按预期立即观察事件。有关详情，请参阅此博客文章：http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

以上链接的推荐修复：

  • 重新启动计算机
  • 通过“磁盘工具”检查磁盘并修复权限
  • 将文件夹添加到Spotlight隐私列表（要编制的文件夹列表中），然后从中删除，有效地强制重建索引
  • 重命名该文件夹，然后可能将其重命名为
  • 重新创建文件夹并将旧内容移回其中

前两个对我们没有用，没有尝试Spotlight建议，重新创建并不是必要的。

我们能够通过打开Finder并在每个连续的父文件夹中创建文件来找到根问题文件夹，直到立即出现（因为Finder也会受到这个bug的影响）。不更新的最根文件夹是罪魁祸首。我们只是mv＆＃39; d mv＆＃39;回到原来的名字，然后观察者工作了。

不知道导致腐败的原因，但我很高兴能够解决问题。

答案 2 :(得分：26)

将以下代码添加到我的webpack配置文件中为我解决了这个问题，希望这会有所帮助。 不要忘记忽略你的node_modules文件夹，因为这会破坏HMR（热模块替换）的性能：

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

答案 3 :(得分：19)

使用WebStorm时遇到此问题。

停用设置 - ＆gt;系统设置 - ＆gt; ＆＃34;安全写＆＃34; 为我解决了。

在WebPack Troubleshooting

中找到了建议

答案 4 :(得分：14)

只是添加可能的解决方案： 我把我的项目文件夹放在Dropbox文件夹中，移出它解决了我的问题。 （OS X）

答案 5 :(得分：9)

一个问题是，如果您的路径名称不是绝对的，那么这样的事情就会发生。我不小心将resolve.root设置为./而不是__dirname，这导致我浪费了大量时间来删除和重新创建像我这样的人一样的文件。

答案 6 :(得分：8)

如果通过César将fs.inotify.max_user_watches更改为pointend仍然无效，请尝试使用轮询而不是本机观察者，方法是创建脚本，如docs中所示，或使用--watch --watch-poll运行webpack选项。

答案 7 :(得分：6)

如果您使用的是Vim，则应尝试将backupcopy设置为yes而不是默认auto。否则Vim有时会重命名原始文件并创建一个新文件，这将搞乱webpack watch：

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

如果是这种情况，只需将其添加到您的vim设置：

set backupcopy = yes

答案 8 :(得分：6)

更新：删除整个目录并从repo重新克隆克隆修复了我的问题。

答案 9 :(得分：5)

请注意，如果您在虚拟机（Vagrant / Virtualbox）中运行webpack并在主机平台上更改文件，则共享文件夹中的文件更新可能不会在Ubuntu上触发inotify。这将导致webpack无法获取更改。

请参阅：Virtualbox ticket #10660

就我而言，在de guest（vi）上编辑和保存文件确实触发了webpack。在主机上编辑它（在PhpStorm，Notepad或任何其他应用程序中）dit不会触发webpack。

我使用vagrant-fsnotify解决了这个问题。

答案 10 :(得分：4)

哟!!!!文件夹区分大小写是我的问题。我的代码调用require（）具有所有小写路径名，但实际目录中包含大写字母。我将所有目录重命名为小写，webpack观看即刻工作。 YESssssssssssssss !!!!! _AckerApple

答案 11 :(得分：4)

我在.vue文件上遇到了同样的问题。 当服务器重新启动时，一切工作正常，但在下一次保存时，它不再重新编译。 问题出在导入文件路径上，其中一个字母大写。要解决这个问题非常困难，因为一切都可以在服务器重启时运行。检查你的路径。

答案 12 :(得分：3)

对我来说，问题是在VS Code中创建文件夹和文件。为了解决这个问题，我重新克隆了仓库，这次，通过命令行而不是通过代码创建了新的文件夹和文件。我认为代码由于某种原因破坏了文件。我看到该应用程序刚刚更新，因此可能是一个新错误。

答案 13 :(得分：3)

它不是为我重新编译，但后来我意识到/记得webpack监视依赖图而不仅仅是文件夹（或文件）。果然，我正在改变的文件还不是那张图的一部分。

答案 14 :(得分：2)

我的原因是什么

似乎值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

但是，即使我更改了该值，当我重新启动PC时，它也会恢复为默认的16384。

解决方案，如果您使用Linux操作系统（我的情况下，我使用的是Manjaro）：

创建文件：

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

并在其中填充：

fs.inotify.max_user_watches=200000

看来200000对我来说足够了。

创建文件并添加值后，只需重新启动PC即可。

答案 15 :(得分：2)

在Laravel Homestead为我工作

--watch --watch-poll

答案 16 :(得分：2)

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

答案 17 :(得分：1)

我有类似的问题，手表模式中的webpack或汇总都没有捕获我所做的更改。我发现这基本上是我的错，因为我正在更改尚未在应用程序中的任何位置导入的模块（.tsx文件）（例如，作为入口点的App.ts）并且我期望构建工具报告错误我在那里。

答案 18 :(得分：1)

我删除node_modules并再次执行npm install或yarn安装所有软件包解决了问题

答案 19 :(得分：1)

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

plugins: [
    new webpack.OldWatchingPlugin()
  ]

答案 20 :(得分：0)

我正在添加另一个答案，因为我相信这是迄今为止最好的解决方案。 我每天都在使用它，它摇滚！ 只需安装此库：

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

描述： 强制webpack-dev-server程序将bundle文件写入文件系统。

如何安装：

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

答案 21 :(得分：0)

在尝试了解决这个问题的一些策略后，我最终只是放弃了，但是当我再次尝试解决另一个问题时，突然--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++

在安装这些软件包时可能会发生一些依赖性，只是添加了拼图的缺失部分，谁知道......

希望这有助于任何人在那里努力使其发挥作用。

答案 22 :(得分：0)

可能的解决方案：将上下文更改为app目录。

我将所有webpack配置文件放在子文件夹中：

components/
webpack/
 development.js
app.js

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

答案 23 :(得分：0)

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

为我工作

答案 24 :(得分：0)

在使用Vagrant（2.1.15）和rsync同步的VirtualBox（5.2.18）Ubuntu（18.04）VM中也存在此问题。突然，第一个构建运行得很好，但是即使设置了fs.inotify.max_user_watches=524288，Webpack之后也没有考虑这些更改。在Webpack配置中添加poll: true也无济于事。

仅 vagrant-notify-forwarder 有效（出于某种原因，vagrant-fsnotify无效），但是在将文件保存到主机后，重建发生得太快了，我认为rsync不能没有足够的时间来完成其任务（可能是由于Vagrantfile中同步目录的数量？）。

最后，通过在Webpack配置中增加 aggregateTimeout ，使手表再次工作：

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

如果此解决方案适合您，请尝试再次降低此值，否则您将需要等待10秒钟，直到每次您点击保存都会重新开始构建。默认值为300 ms。

答案 25 :(得分：0)

当我遇到类似的问题时，我遇到了这个问题-看来即使运行webpack --config，webpack也没有重新打包。

我什至删除了bundle.js，并且网页仍像编辑前一样显示。

对于那些遇到相同问题的人，我终于在chrome中进行了“空缓存和硬重载”选项（在打开devtools的情况下右键单击重载按钮），并且做到了这一点

答案 26 :(得分：0)

我遇到了同样的问题，尝试了很多事情，最后 Mac 上的 Chrome清除浏览数据对我有用。

这些模块已安装：

“浏览器同步”：“ ^ 2.26.7”，

“ browser-sync-webpack-plugin”：“ ^ 2.2.2”，

“ webpack”：“ ^ 4.41.2”，

“ webpack-cli”：“ ^ 3.3.9”

答案 27 :(得分：0)

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

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

在第一个终端窗口中运行：webpack --watch

在第二个终端窗口中运行：webpack-dev-server

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

答案 28 :(得分：0)

.js和.ts文件之间存在问题。为什么？

在项目构建中，Visual Studio将打字稿文件编译为.js和.js.map。 这完全没有必要，因为webpack也可以处理打字稿文件（使用awesome-typescript-loader）。在 Visual Studio代码中编辑componet .tsx文件或在tsconfig.json中禁用了 compileOnSave 选项时，未重新编译已编辑的ts文件，并且我的Webpack正在处理不正确的.js文件。

解决方案是在项目构建时在Visual Studio中禁用编译打字稿文件。添加

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

.csproj的PropertyGroup中。

答案 29 :(得分：-1)

问题是：webpack从一些奇怪的URL加载脚本：webpack：///缓存了。 您应该在脚本末尾添加版本以防止缓存： 07 09

相关问题
最新问题