javascript - webpack --watch 没有编译更改的文件

Question

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

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

有任何想法吗？

score 90 · Accepted Answer

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

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

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

score 84 · Accepted Answer

仅供参考：似乎 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把mv它改回原来的名字，然后观察者就开始工作了。

不知道是什么导致了腐败，但我很高兴有一个修复。

score 48 · Accepted Answer

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

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

score 29 · Accepted Answer

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

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

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

score 14 · Accepted Answer

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

score 14 · Accepted Answer

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

score 9 · Accepted Answer

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

score 8 · Accepted Answer

8

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

于 2014-11-03T05:40:24.040 回答

score 8 · Accepted Answer

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

请参阅：Virtualbox 票证 #10660

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

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

score 8 · Accepted Answer

8

在 Laravel Homestead 为我工作

--watch --watch-poll

于 2018-03-15T01:07:41.117 回答

score 8 · Accepted Answer

如果 César 指出的更改 fs.inotify.max_user_watches 仍然不起作用，请尝试通过创建文档--watch --watch-poll中所示的脚本或使用选项运行 webpack来使用轮询而不是原生观察者。

score 6 · Accepted Answer

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

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

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

设置备份复制=是

score 5 · Accepted Answer

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

在使用带有 rsync 同步的 Vagrant (2.1.15) 的 VirtualBox (5.2.18) Ubuntu (18.04) VM 中也存在此问题。突然之间，第一次构建运行得很好，但是 Webpack 并没有考虑到之后的变化，即使使用了fs.inotify.max_user_watches=524288set。添加poll: trueWebpack 配置也无济于事。

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

最后，我通过增加aggregateTimeout我的 Webpack 配置中的，让手表再次工作：

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

如果此解决方案适合您，请尝试再次降低此值，否则您必须等待 10 秒，直到每次点击保存时重新启动构建。默认值为300 毫秒。

score 2 · Accepted Answer

我的情况是什么原因：

似乎: max_user_watches in 的值/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，就可以了。

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

plugins: [
    new webpack.OldWatchingPlugin()
  ]

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

如何安装：

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

score 0 · Accepted Answer

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

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

components/
webpack/
 development.js
app.js

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

score 0 · Accepted Answer

我遇到了同样的问题，尝试了很多东西，最后在Mac上的Chrome Clear Browsing Data对我有用。

这些模块已安装：

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

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

"webpack": "^4.41.2",

“webpack-cli”：“^3.3.9”

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

问题出在 .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 中。

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

0

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

为我工作

于 2018-08-28T20:26:56.227 回答

score -1 · Accepted Answer

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

javascript - webpack --watch 没有编译更改的文件

31 回答 31

我的情况是什么原因：

解决方案如果你有 Linux 操作系统（我的情况，我有 Manjaro）：

Related

Reference