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

JavaScript Webpack

番长

2020-03-23

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

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

有任何想法吗?

第2765篇《webpack --watch不编译更改的文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

27个回答
TonyItachi 2020.03.23

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

飞云猪猪 2020.03.23

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

为我工作

理查德Eva 2020.03.23

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

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

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

番长樱梅 2020.03.23

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

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

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

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

这些模块已安装:

“ browser-sync”:“ ^ 2.26.7”,

“ browser-sync-webpack-plugin”:“ ^ 2.2.2”,

“ webpack”:“ ^ 4.41.2”,

“ webpack-cli”:“ ^ 3.3.9”

凯梅阳光 2020.03.23

在尝试了一些解决该问题的策略后,我最终只是放弃了,但是在解决另一个问题时,我又尝试了一下,突然间,--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++

可能已经发生了,在安装这些软件包时,某些依赖性只是增加了难题的缺失部分,谁知道...

希望这可以帮助任何苦苦挣扎的人使它正常工作。

2020.03.23

我要添加另一个答案,因为我认为这是迄今为止最好的解决方案。我每天都在使用它,它震撼了!只需安装此库:

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

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

如何安装 :

npm install write-file-webpack-plugin --save-dev
小哥小宇宙 2020.03.23

在MacOS上,一个简单的解决方案如下:

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

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

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

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

猿前端 2020.03.23

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

蛋蛋 2020.03.23

在使用Vagrant(2.1.15)和rsync同步的VirtualBox(5.2.18)Ubuntu(18.04)VM中也存在此问题。突然,第一个构建运行良好,但Webpack甚至在fs.inotify.max_user_watches=524288设置好之后都没有考虑到更改添加poll: trueWebpack配置也没有帮助。

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

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

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

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

西门 2020.03.23

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

plugins: [
    new webpack.OldWatchingPlugin()
  ]
Mandy村村 2020.03.23

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

Tony凯 2020.03.23

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

Tom凯 2020.03.23

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

Green逆天 2020.03.23

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

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

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

设置backupcopy = yes

null 2020.03.23

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

前端L 2020.03.23

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

Mandy 2020.03.23

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

请参阅:Virtualbox门票#10660

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

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

小小 2020.03.23

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

宝儿理查德 2020.03.23

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

神乐凯 2020.03.23

在Laravel Homestead为我工作

--watch --watch-poll
Itachi 2020.03.23

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

卡卡西Near 2020.03.23

如果您的代码没有被重新编译,请尝试增加观察者的数量(在Ubuntu中):

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

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

达蒙 2020.03.23

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

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

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

JinJin 2020.03.23

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

西门 2020.03.23

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

Stafan路易 2020.03.23

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android