web-dev-qa-db-ja.com

webpack --watchは変更されたファイルをコンパイルしていません

webpack --watchを実行しようとしましたが、JSファイルを編集した後、自動再コンパイルがトリガーされません。

npm uninstallを使用してwebpackを再インストールしようとしましたが、まだ機能していません。

何か案は?

82
alcedo

参考までに、OS Xではフォルダーが破損し、それ自体と子フォルダーにfseventswatchpack/chokidar/Finderが使用する)を送信できなくなるようです。これがあなたに起こったことを確信することはできませんが、私と同僚にとって非常にイライラしました。

破損した親フォルダーの名前を変更し、期待どおりにイベントがすぐに通過するのを見ることができました。詳細については、このブログ投稿を参照してください: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

上記のリンクから推奨される修正は次のとおりです。

  • コンピューターの再起動
  • ディスクを確認し、ディスクユーティリティを介してアクセス許可を修復する
  • フォルダーをSpotlightプライバシーリスト(インデックスを作成しないフォルダーのリスト)に追加し、そこから削除して、インデックスの再作成を効果的に強制する
  • フォルダの名前を変更し、場合によっては元の名前に戻す
  • フォルダを再作成し、古いコンテンツをそこに戻す

最初の2つは機能しませんでしたが、Spotlightの提案を試みませんでした。また、再作成する必要はありませんでした。

Finderを開いて、すぐに表示されるまで各連続する親フォルダーにファイルを作成することで、ルートの問題フォルダーを見つけることができました(Finderもこのバグに悩まされるため)。更新されない最もルートのフォルダーが原因です。 mv 'dし、mv' dを元の名前に戻しただけで、ウォッチャーは働きました。

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

63
Ben Mosher

コードが再コンパイルされていない場合は、ウォッチャーの数を増やしてみてください(Ubuntuで):

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

ソース: https://webpack.github.io/docs/troubleshooting.html

78
César

次のコードをWebpack構成ファイルに追加すると、問題が解決しました。これが役立つことを願っています。 node_modulesフォルダーを無視することを忘れないでください。HMR(Hot Module Replacement)のパフォーマンスが低下するためです。

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

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

Settings-> System Settings-> "safe write"を無効にすることで解決しました。

推奨事項は次のとおりです: WebPack Troubleshooting

21
Chris

考えられる解決策に追加するために、プロジェクトフォルダーをDropboxフォルダー内に配置し、それを移動することで問題を解決しました。 (OS X)

14
Les

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

9
Liam Horne

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

8
Angelo Selvini

更新:ディレクトリ全体を削除し、Gitをリポジトリから新たに複製すると、問題が修正されます。

7
alcedo

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

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

この場合、これをvim設定に追加するだけです。

backupcopy = yesを設定します

6
rosenfeld

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

参照: Virtualboxチケット#1066

私の場合、de viviでファイルを編集して保存すると、webpackがトリガーされました。ホスト(PhpStorm、メモ帳、または他のアプリケーション)で編集しても、Webpackをトリガーしたことはありません。

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

6
mk8374876

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

5
Acker Apple

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

4
Paulo Bruckmann

Laravel Homesteadで働く

--watch --watch-poll
3

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

3
lisafrench

再コンパイルはしていませんでしたが、webpackはフォルダー(またはファイル)だけでなく依存関係グラフを監視していることを認識しました。案の定、私が変更していたファイルはまだそのグラフの一部ではありませんでした。

3
Mike Cheel

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

2
AotearoaCoder

同じ問題があります。フォルダーに文字(*)が含まれているため、コンパイルされていません。また、古いウォッチャープラグインを使用すると、問題が解決するようです。この行をwebpack構成ファイルに追加します。

plugins: [
    new webpack.OldWatchingPlugin()
  ]
1
mat

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

1
itumb

VirtualBox(5.2.18)Ubuntu(18.04)VM内でこの問題が発生しました。rsync同期でVagrant(2.1.15)を使用しています。突然、最初のビルドは問題なく実行されますが、fs.inotify.max_user_watches=524288が設定されていても、Webpackはその後、変更を考慮しません。 Webpackの設定にpoll: trueを追加しても解決しませんでした。

vagrant-notify-forwarderは動作しましたが(vagrant-fsnotifyは何らかの理由で動作しませんでした)、ホストとファイルを保存した後、再構築が速すぎましたrsyncがタスクを完了するのに十分な時間を持っていなかったと仮定します(おそらくVagrantfile内の同期ディレクトリの量が原因でしょうか?)。

最後に、Webpack構成でaggregateTimeoutを増やして、時計を再び機能させました。

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

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

1
Benoît Vogel

私は同様の問題を抱えていたときにこの質問に遭遇しました-webpack --configを実行していても、webpackは再バンドルされていないように見えました。

Bundle.jsを削除しても、編集前と同じようにWebページが表示されていました。

これと同じ問題を抱えている人のために、chrome(devtoolsを開いた状態でリロードボタンを右クリック)で「空のキャッシュとハードリロード」オプションを最終的に実行しました。

0
Steven Anderson

考えられる解決策:contextをappディレクトリに変更します。

サブフォルダーにすべてのwebpack構成ファイルがありました。

components/
webpack/
 development.js
app.js

webpack/development.jscontext: path.join(__dirname, '../')を設定すると、問題が解決しました。

0
wwayne

これがプロジェクトで突然発生した場合、問題を解決できる可能性があります。

どういうわけか、Webpackが探すプロジェクトの変更を追跡していたファイルが破損しました。簡単な手順に従うだけで、それらを再度作成できます。

  1. プロジェクトディレクトリから出てきます。 ($:cd ..)
  2. プロジェクトを別のディレクトリに移動します($:mv {projectName} {newName})
  3. 新しいディレクトリに移動します($:cd {newName})
  4. サーバーを起動し、ファイルが変更されるたびにリロードするかどうかを確認します(ほとんどの場合、webpackは変更を監視するための新しいファイルを作成するため、動作するはずです)
  5. dirから出てきます($:cd ..)
  6. 元の名前に戻す($:mv {newName} {projectNam})これは私のために働いた............
0
Mohammed Shoeb

この問題を修正するためのいくつかの戦略を試した後、私はあきらめてしまいましたが、別の問題を解決しているときにもう一度やり直したところ、突然--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++

これらのパッケージのインストール中に、依存関係によってパズルの欠落している部分が追加されただけであることがわかりました。

これが機能するためにそこに苦労している人を助けることを願っています。

0
utxeee

これがこれまでの最善の解決策であると信じているため、別の答えを追加しています。私は毎日それを使用しています、それは揺れ動いています!このライブラリをインストールするだけです:

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

説明:webpack-dev-serverプログラムがバンドルファイルをファイルシステムに強制的に書き込みます。

インストールする方法 :

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

--watch-d --watchに変更してみてください

私のために働いた

0
Adrin

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

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

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

2番目のターミナルウィンドウで実行:webpack-dev-server

私は多くの可能な解決策を試しましたが、これが最も信頼できるようです

0
skiabox