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

Question

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

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

有任何想法吗？

Answer 1

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

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

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

Answer 2

仅供参考：似乎 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 it 并mv 'd 它回到原来的名字，然后观察者工作。

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

Answer 3

将以下代码添加到我的 webpack 配置文件中为我解决了这个问题。 不要忘记忽略您的 node_modules 文件夹，因为这会降低 HMR（热模块更换）的性能：

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

Answer 4

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

禁用设置 -> 系统设置 ->“安全写入”为我解决了这个问题。

在WebPack 故障排除中找到了这样做的建议

Answer 5

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

Answer 6

文件夹区分大小写是我的问题。 我对 require() 的代码调用具有全部小写路径名，但实际目录中有一个大写字母。 我将所有目录重命名为小写，并且 webpack 监视立即生效。

Answer 7

一个问题是，如果您的路径名不是绝对的，那么这样的事情就会发生。 我不小心设置resolve.root到./代替__dirname ，这使我浪费了很多时间删除并重新创建文件，比如我上面的家伙。

Answer 8

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

Answer 9

如果 César 指出更改 fs.inotify.max_user_watches 仍然不起作用，请尝试使用轮询代替本机观察者，方法是创建您的脚本（如文档中所示）或使用--watch --watch-poll选项运行 webpack。

Answer 10

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

请参阅： Virtualbox 票 #10660

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

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

Answer 11

在 Laravel Homestead 为我工作

--watch --watch-poll

Answer 12

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

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

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

设置备份复制=是

Answer 13

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

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

在使用 Vagrant (2.1.15) 和 rsync 同步的 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 毫秒。

Answer 19

我的情况是什么原因：

看来，值： 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就可以了。

Answer 20

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

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Answer 21

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

Answer 22

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

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

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

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

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

Answer 23

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

我的所有 webpack 配置文件都在一个子文件夹中：

components/
webpack/
 development.js
app.js

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

Answer 24

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

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

希望这可以帮助任何在那里努力使其工作的人。

Answer 25

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

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

说明：强制 webpack-dev-server 程序将捆绑文件写入文件系统。

如何安装 ：

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

Answer 26

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

为我工作

Answer 27

如果这在您的项目中突然发生，那么这可以解决问题。

也许不知何故，跟踪您的项目更改的文件被 webpack 查找损坏了。 您只需按照简单的步骤即可再次创建它们。

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

Answer 28

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

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

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

Answer 29

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

已安装这些模块：

"浏览器同步": "^2.26.7",

"browser-sync-webpack-plugin": "^2.2.2",

"webpack": "^4.41.2",

"webpack-cli": "^3.3.9"

Answer 30

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

在项目构建时，Visual Studio 将打字稿文件编译为 .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 中。

Answer 31

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