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

我尝试运行，webpack --watch并且在编辑我的JS文件后，它不会触发自动重新编译。

我尝试webpack使用重新安装，npm uninstall但仍然无法正常工作。

有任何想法吗？

仅供参考：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也会因该错误而被占用）。最根本的文件夹不会更新是罪魁祸首。我们只是mv倒是它，mv倒是回原来的名字，然后观察者工作。

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

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

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

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

将以下代码添加到我的webpack配置文件中可以解决此问题，希望对您有所帮助。不要忘记忽略您的node_modules文件夹，因为那样会降低HMR（热模块更换）的性能：

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

使用WebStorm时遇到了这个问题。

禁用设置->系统设置->“安全写入”已为我解决。

在以下位置找到了这样做的建议：WebPack故障排除

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

文件夹区分大小写是我的问题。我对require（）的代码调用具有所有小写的路径名，但是实际目录中有一个大写字母。我将所有目录重命名为小写，并且可以立即观看Webpack。

一个问题是，如果您的路径名不是绝对的，则将发生此类情况。我不小心设置resolve.root为./而不是，__dirname这导致我浪费大量时间删除和重新创建像我上面的家伙一样的文件。

如果按César的指示更改fs.inotify.max_user_watches仍然不起作用，请尝试通过按文档所示创建脚本或使用带--watch --watch-poll选项的webpack运行轮询而不是本机监视程序。

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

请参阅：Virtualbox门票＃10660

就我而言，在de guest（在vi中）上编辑和保存文件确实触发了webpack。在主机上（在PhpStorm，记事本或任何其他应用程序中）进行编辑不会触发webpack，无论我做什么。

我通过使用vagrant-fsnotify解决了它。

在Laravel Homestead为我工作

--watch --watch-poll

更新：删除整个目录并从仓库中重新克隆git解决了我的问题。

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

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

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

设置backupcopy = yes

我在.vue文件上遇到相同的问题。重新启动服务器后，一切正常，但在下一次保存时，不再重新编译。问题出在一个大写字母的导入文件路径上。很难弄清楚这个问题，因为服务器重启后一切正常。检查路径的大小写。

它不是为我重新编译，但后来我意识到/记得webpack监视依赖关系图，而不仅仅是监视一个文件夹（或文件）。当然，我要更改的文件还不属于该图表。

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

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

解决问题的方法是在导入路径中发现一个大写错误。文件系统上的文件夹首字母为小写，导入路径为大写。一切都编译良好，所以这只是一个webpack监视包含问题。

在使用Vagrant（2.1.15）和rsync同步的VirtualBox（5.2.18）Ubuntu（18.04）VM中也存在此问题。突然之间，第一个构建运行良好，但是Webpack甚至在fs.inotify.max_user_watches=524288设置好之后都没有考虑到更改。新增中poll: true Webpack配置也无济于事。

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

最后，通过增加aggregateTimeoutWebpack配置，使手表再次工作：

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

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

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

plugins: [
    new webpack.OldWatchingPlugin()
  ]

对我来说，删除node_modules并再次执行npm install或yarn来安装所有软件包可以解决问题

我的原因是什么：

看来那价值：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 OS（我的情况下，我使用的是Manjaro），请执行以下解决方案：

创建文件：

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

并填充：

fs.inotify.max_user_watches=200000

看来200000对我来说足够了。

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

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

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

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

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

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

可能的解决方案：将上下文更改为应用程序目录。

我所有的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程序将分发包文件写入文件系统。

如何安装 ：

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

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

为我工作

如果您的项目突然发生这种情况，则可以解决此问题。

也许以某种方式跟踪您的项目的文件更改了webpack所查找的文件，但已损坏。您可以按照以下简单步骤再次创建它们。

1. 从您的项目目录中出来。（$：cd ..）
2. 将您的项目移到其他目录（$：mv {projectName} {newName}）
3. 进入新目录（$：cd {newName}）
4. 启动服务器并检查它是否在每次文件更改时都重新加载（在大多数情况下它应该可以工作，因为现在webpack会创建新文件来监视更改）
5. 从目录出来（$：cd ..）
6. 将其移回其原始名称（$：mv {newName} {projectNam}）这对我​​有用.........

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

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

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

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

这些模块已安装：

“ browser-sync”：“ ^ 2.26.7”，

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

“ webpack”：“ ^ 4.41.2”，

“ webpack-cli”：“ ^ 3.3.9”

问题出在.js和.ts文件之间。为什么呢

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

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

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

在.csproj的PropertyGroup中。