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プライバシーリスト（インデックスを作成しないフォルダーのリスト）に追加し、そこから削除して、効果的に再インデックスを強制する
• フォルダの名前を変更してから、おそらく名前を元に戻す
• フォルダを再作成し、古いコンテンツをその中に戻す

最初の2つはうまくいきませんでした、Spotlightの提案を試しませんでした、そして再作成は必要であると証明されませんでした。

Finderを開き、1つがすぐに表示されるまで（Finderもこのバグに悩まされるため）親フォルダーごとにファイルを作成して、ルート問題フォルダーを見つけることができました。更新されない最もルートのフォルダが原因です。私たちはただmv「Dそれとmv」元の名前に戻ってそれをD、その後、ウォッチャーが働いていました。

何が原因で破損が発生するかはわかりませんが、修正できることを嬉しく思います。

コードが再コンパイルされていない場合は、ウォッチャーの数を増やしてみてください（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構成ファイルに追加すると、問題が解決しました。これが役に立てば幸いです。HMR（Hot Module Replacement）のパフォーマンスが低下するため、node_modulesフォルダーを無視することを忘れないでください。

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

WebStormで作業しているときにこの問題が発生しました。

設定を無効にする->システム設定->「安全な書き込み」で解決しました。

そのための推奨事項を見つけました：WebPackトラブルシューティング

考えられる解決策を追加するだけです。Dropboxフォルダー内にプロジェクトフォルダーがあり、それを移動することで問題が解決しました。（OS X）

フォルダーの大文字と小文字の区別が私の問題でした。require（）への私のコード呼び出しにはすべて小文字のパス名が含まれていましたが、実際のディレクトリには大文字が含まれていました。私はすべてのディレクトリの名前を小文字に変更し、webpackの監視がすぐに機能しました。

1つの問題は、パス名が絶対でない場合、このようなことが起こるということです。誤っresolve.rootての./代わりに設定してい__dirnameたため、上の人のようにファイルを削除して再作成することに多くの時間を浪費していました。

Césarによる指摘でfs.inotify.max_user_watchesを変更しても問題が解決しない場合は、ドキュメントに示されているようにスクリプトを作成するか、--watch --watch-pollオプションを指定してwebpackを実行して、ネイティブウォッチャーの代わりにポーリングを使用してみてください。

仮想マシン（Vagrant / Virtualbox）内でwebpackを実行し、ホストプラットフォームでファイルを変更した場合、共有フォルダーでのファイルの更新がUbuntuでinotifyをトリガーしない場合があることに注意してください。これにより、変更がwebpackによって取得されなくなります。

参照：Virtualboxチケット＃10660

私の場合、ゲスト（vi）でファイルを編集して保存すると、webpackがトリガーされました。ホスト（PhpStorm、メモ帳、その他のアプリケーション）で編集しても、私が行った操作はWebpackをトリガーしません。

vagrant-fsnotifyを使用して解決しました。

Laravel Homesteadで働く

--watch --watch-poll

更新：ディレクトリ全体を削除し、リポジトリからGitクローンを新しく作成すると、問題が解決します。

Vimを使用している場合は、backupcopyをデフォルトのautoではなくyesに設定してみてください。そうしないと、Vimが元のファイルの名前を変更して新しいファイルを作成することがあります。

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

これが当てはまる場合は、これをvim設定に追加してください：

set backupcopy = yes

.vueファイルでも同じ問題が発生していました。サーバーを再起動するとすべて正常に動作しましたが、次の保存時にサーバーは再コンパイルされませんでした。問題は、1文字が大文字のインポートファイルパスにありました。すべてがサーバーの再起動で機能するため、この問題を理解するのは非常に困難です。パスの大文字小文字を確認してください。

私にとっては再コンパイルではありませんでしたが、webpackがフォルダー（またはファイル）だけでなく、依存関係グラフを監視していることに気づきました。確かに、私が変更したファイルはまだそのグラフの一部ではありませんでした。

私にとっては、VS Codeでフォルダーとファイルを作成することが問題でした。修正するために、私は私のリポを再クローンし、今回はコードの代わりにコマンドラインを介して新しいフォルダーとファイルを作成しました。コードが何らかの理由でファイルを破損していたと思います。アプリケーションが更新されたのを見たので、それは新しいバグかもしれません。

私が同様の問題を抱えていて、私が行った変更をキャッチするウォッチモードウェアのWebpackもロールアップもありませんでした。アプリケーションのどこにもまだインポートされていないモジュール（.tsxファイル）（たとえば、エントリポイントであるApp.ts）を変更していたので、基本的には私のせいであることがわかり、ビルドツールがエラーを報告することを期待していました。そこに作られました。

私が問題を解決した方法は、インポートパスで大文字のエラーを見つけることでした。ファイルシステムのフォルダの最初の文字は小文字で、インポートパスは大文字でした。すべてが正常にコンパイルされたため、これは単にwebpackウォッチのインクルード問題でした。

rsync同期でVagrant（2.1.15）を使用するVirtualBox（5.2.18）Ubuntu（18.04）VM内にもこの問題がありました。突然、最初のビルドは問題なく実行されますが、Webpackは、fs.inotify.max_user_watches=524288セットがあっても、その後の変更を考慮に入れません。poll: trueWebpack構成に追加しても効果がありませんでした。

のみ vagrant-notify-forwarder（浮浪者-fsnotifyが何らかの理由で、しませんでした）働いていたが、その後、再構築したホスト上のファイルを保存した後、あまりにも急速に起こったと私はそれrsyncは多分による量に（そのタスクを完了するのに十分な時間を持っていなかったと仮定私のVagrantfile内の同期されたディレクトリの？）

最後にaggregateTimeout、Webpack構成のも増やすことで、時計を再び動作させました。

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

この解決策が機能する場合は、この値をもう一度下げてみてください。そうしないと、保存を押すたびにビルドが再開されるまで10秒待つ必要があります。デフォルト値は300 msです。

同じ問題があります。また、フォルダーに文字（*）が含まれているため、コンパイルできないことに気付きました。また、古いウォッチャープラグインを使用すると、問題が解決するようです。この行を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を持っているなら解決策（私の場合、私はマンジャロを持っています）：

ファイルを作成します。

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

そしてそれを入れてください：

fs.inotify.max_user_watches=200000

20万で十分だと思います。

ファイルを作成して値を追加したら、PCを再起動するだけで問題ありません。

MacOSでの簡単な解決策は次のとおりです。

プロジェクトが存在する同じディレクトリで2つのターミナルウィンドウを開きます。

最初のターミナルウィンドウで実行：webpack --watch

2番目のターミナルウィンドウで実行：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を削除しても、編集前と同じようにWebページが表示されていました。

これと同じ問題が発生する人のために、私はついにクロムで「空のキャッシュとハードリロード」オプションを実行しました（devtoolsを開いた状態でリロードボタンを右クリックします）。

同じ問題に遭遇し、多くのことを試しましたが、ついにMac上のChrome Clear Browsing Dataがうまくいきました。

これらのモジュールがインストールされました：

"ブラウザ同期"： "^ 2.26.7"、

"ブラウザ同期-ウェブパック-プラグイン"： "^ 2.2.2"、

"ウェブパック"： "^ 4.41.2"、

"webpack-cli"： "^ 3.3.9"

問題は、.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でtypescriptファイルのコンパイルを無効にすることでした。追加

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

.csprojのPropertyGroup内。