webpack --watch가 변경된 파일을 컴파일하지 않습니다.

실행을 시도 webpack --watch하고 JS 파일을 편집 한 후 자동 재 컴파일을 트리거하지 않습니다.

다시 설치 webpack를 시도했지만 npm uninstall여전히 작동하지 않습니다.

어떤 아이디어?

참고 :이 OS X이 손상받을 폴더와 더 이상 보낼 수 있습니다 보인다 fsevents( watchpack/ chokidar자체 / 파인더 사용) 및 하위 폴더를. 이것이 당신에게 일어난 일인지 확신 할 수는 없지만 저와 동료에게는 매우 실망 스러웠습니다.

손상된 상위 폴더의 이름을 바꿀 수 있었고 예상대로 이벤트가 즉시 발생하는 것을 볼 수있었습니다. 자세한 내용은이 블로그 게시물을 참조하십시오. http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

위 링크에서 권장하는 수정 사항은 다음과 같습니다.

• 컴퓨터 재부팅
• 디스크 유틸리티를 통해 디스크 확인 및 권한 복구
• Spotlight 개인 정보 목록 (인덱싱하지 않을 폴더 목록)에 폴더를 추가 한 다음 제거하여 효과적으로 재 인덱싱
• 폴더 이름을 바꾼 다음 다시 이름 바꾸기
• 폴더를 다시 만들고 이전 내용을 다시 폴더로 이동

처음 두 가지는 우리에게 효과가 없었고 Spotlight 제안을 시도하지 않았으며 재현이 필요하다는 것이 입증되지 않았습니다.

우리는 Finder를 열고 즉시 나타날 때까지 각각의 연속적인 상위 폴더에 파일을 생성하여 루트 문제 폴더를 찾을 수있었습니다 (Finder가이 버그로 인해 망가질 것이므로). 업데이트되지 않는 가장 루트 폴더가 범인입니다. 우리는 mv그것을 mv원래 이름으로 되돌려 놓은 다음 감시자가 일했습니다.

부패의 원인이 무엇인지는 모르겠지만 문제를 해결하게되어 기쁩니다.

코드가 다시 컴파일되지 않으면 감시자 수를 늘리십시오 (Ubuntu에서).

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

출처 : https://webpack.github.io/docs/troubleshooting.html

내 웹팩 구성 파일에 다음 코드를 추가하면 문제가 해결되었으므로 도움이되기를 바랍니다. HMR (핫 모듈 교체)의 성능을 저하 시키므로 node_modules 폴더를 무시하는 것을 잊지 마십시오.

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

WebStorm으로 작업 할 때이 문제가 발생했습니다.

설정-> 시스템 설정-> "안전 쓰기"를 비활성화 하면 문제가 해결되었습니다.

권장 사항은 WebPack 문제 해결 에서 찾았습니다.

가능한 해결책을 추가하기 위해 : Dropbox 폴더 안에 프로젝트 폴더가 있었는데,이 폴더를 옮기면 문제가 해결되었습니다. (OS X)

폴더 대소 문자 구분이 제 문제였습니다. require ()에 대한 내 코드 호출에는 모두 소문자 경로 이름이 있지만 실제로 디렉토리에는 대문자가 있습니다. 내 모든 디렉토리의 이름을 소문자로 변경하고 웹팩 시청이 즉시 작동했습니다.

한 가지 문제는 경로 이름이 절대적이지 않으면 이와 같은 일이 발생한다는 것입니다. 실수로 설정 한 resolve.root에 ./대신 __dirname이 시간의 삭제 나 위의 사람처럼 다시 만드는 많은 파일을 낭비 나 발생했습니다.

César가 지적한대로 fs.inotify.max_user_watches를 변경해도 여전히 작동하지 않는 경우 문서에 표시된대로 스크립트를 작성 하거나 --watch --watch-poll옵션 과 함께 웹팩을 실행 하여 기본 감시자 대신 폴링을 사용하십시오 .

가상 머신 (Vagrant / Virtualbox)에서 웹팩을 실행하고 호스트 플랫폼에서 파일을 변경하는 경우 공유 폴더의 파일 업데이트가 Ubuntu에서 inotify를 트리거하지 않을 수 있습니다. 그러면 변경 사항이 webpack에서 선택되지 않습니다.

참조 : Virtualbox 티켓 # 10660

제 경우에는 de guest (vi)에서 파일을 편집하고 저장하면 webpack이 트리거되었습니다. 호스트 (PhpStorm, 메모장 또는 기타 응용 프로그램에서)에서 편집하면 내가 한 일이 웹 팩을 트리거하지 않습니다.

vagrant-fsnotify 를 사용하여 해결했습니다 .

Laravel Homestead에서 나를 위해 일하십시오.

--watch --watch-poll

업데이트 : 전체 디렉토리를 삭제하고 저장소에서 새로 복제하면 문제가 해결됩니다.

Vim을 사용하는 경우 기본 자동이 아닌 backupcopy를 yes로 설정해야합니다. 그렇지 않으면 Vim은 때때로 원본 파일의 이름을 바꾸고 새 파일을 생성하여 webpack watch를 망칠 것입니다.

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

이 경우 vim 설정에 다음을 추가하십시오.

backupcopy = yes 설정

.vue 파일에서 동일한 문제가 발생했습니다. 서버가 다시 시작되면 모두 정상적으로 작동했지만 다음 저장시 더 이상 다시 컴파일되지 않았습니다. 문제는 대문자 하나가있는 가져 오기 파일 경로에있었습니다. 모든 것이 서버 재부팅에서 작동하기 때문에이 문제를 파악하는 것은 매우 어렵습니다. 경로의 사례를 확인하십시오.

나를 위해 다시 컴파일하지 않았지만 webpack이 폴더 (또는 파일)가 아닌 종속성 그래프를 감시한다는 것을 깨달았습니다 / 기억했습니다. 확실히 내가 변경 한 파일은 아직 그 그래프의 일부가 아니 었습니다.

저에게는 VS Code에서 폴더와 파일을 만드는 것이 문제였습니다. 수정하기 위해 리포지토리를 다시 복제했고 이번에는 코드 대신 명령 줄을 통해 새 폴더와 파일을 생성했습니다. 어떤 이유로 코드가 파일을 손상시킨 것 같습니다. 방금 응용 프로그램이 업데이트되어 새 버그 일 수 있습니다.

나는 비슷한 문제가 있었는데, 내가 만든 변경 사항을 포착하는 워치 모드웨어의 웹팩이나 롤업이 없었습니다. 응용 프로그램에서 아직 가져 오지 않은 모듈 (.tsx 파일) (예 : 진입 점 인 App.ts)을 변경하고 빌드 도구에서 오류를보고 할 것으로 예상했기 때문에 기본적으로 내 잘못이라는 것을 알았습니다. 거기에 만들었습니다.

문제를 해결하는 방법은 가져 오기 경로에서 대문자 오류를 찾는 것이 었습니다. 파일 시스템의 폴더는 첫 글자가 소문자이고 가져 오기 경로는 대문자입니다. 모든 것이 잘 컴파일되었으므로 이것은 단지 webpack watch include 문제였습니다.

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 내부의 동기화 된 디렉토리?).

마지막으로 aggregateTimeoutWebpack 구성에서를 늘려 시계를 다시 작동하게했습니다 .

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

이 솔루션이 효과가 있다면이 값을 다시 낮추십시오. 그렇지 않으면 저장을 누를 때마다 빌드가 다시 시작될 때까지 10 초 동안 기다려야합니다. 기본값은 300ms 입니다.

나는 같은 문제가 있습니다. 그리고 내 폴더에 문자 (*)가 포함되어 있기 때문에 컴파일되지 않습니다. 그리고 이전 감시자 플러그인을 사용하면 문제가 해결되는 것 같습니다. 이 줄을 웹팩 구성 파일에 추가하십시오.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

나를 node_modules위해 모든 패키지를 설치하기 위해 npm 설치 또는 원사를 다시 삭제 하고 수행하면 문제가 해결되었습니다.

내 경우의 원인은 무엇입니까?

그것은의 값을 보인다 : max_user_watches (가)에 /proc/sys/fs/inotify/max_user_watches 영향을 미치는 웹팩입니다

실제 가치를 확인하려면

$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가있는 경우 (제 경우에는 Manjaro가 있습니다) :

파일을 만듭니다.

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

다음으로 채 웁니다.

fs.inotify.max_user_watches=200000

200000이면 충분 해 보입니다.

파일을 생성하고 값을 추가 한 후 PC를 다시 시작하면 괜찮습니다.

MacOS의 쉬운 솔루션은 다음과 같습니다.

프로젝트가있는 동일한 디렉토리에서 두 개의 터미널 창을 엽니 다.

첫 번째 터미널 창에서 다음을 실행합니다. webpack --watch

두 번째 터미널 창에서 다음을 실행합니다. webpack-dev-server

나는 많은 가능한 해결책을 시도했고 이것이 가장 신뢰할 수있는 것 같다

가능한 해결책 : 컨텍스트 를 앱 디렉토리로 변경 합니다.

하위 폴더에 모든 웹팩 구성 파일이 있습니다.

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

나를 위해 일했다

프로젝트에서 갑자기 발생한 경우 문제를 해결할 수 있습니다.

어떻게 든 웹팩이 찾는 프로젝트 변경 사항을 추적하는 파일이 손상되었을 수 있습니다. 간단한 단계를 따라 다시 만들 수 있습니다.

1. 프로젝트 디렉토리에서 나오십시오. ($ : cd ..)
2. 프로젝트를 다른 디렉터리로 이동합니다 ($ : mv {projectName} {newName}).
3. 새 디렉토리로 이동 ($ : cd {newName})
4. 서버를 시작하고 파일이 변경 될 때마다 다시로드되는지 확인합니다 (이제 웹팩이 변경 사항을 감시하기 위해 새 파일을 생성하므로 대부분의 경우 작동합니다).
5. 디렉토리에서 나오십시오 ($ : cd ..)
6. 원래 이름으로 다시 이동 ($ : mv {newName} {projectNam}) 이것은 저에게 효과적이었습니다 ............

비슷한 문제가 발생했을 때이 질문을 보았습니다 .webpack --config를 실행하더라도 webpack이 다시 번들링되지 않는 것처럼 보였습니다.

bundle.js도 삭제했는데 웹 페이지가 편집하기 전과 같이 계속 표시되었습니다.

이 같은 문제를 겪는 사람들을 위해 마침내 크롬에서 '빈 캐시 및 하드 다시로드'옵션을 수행했습니다 (devtools가 열린 상태에서 다시로드 버튼을 마우스 오른쪽 버튼으로 클릭).

나는 많은 일을, 같은 문제를 만났다 시도, 마침내 크롬 인터넷 사용 정보 삭제 에 맥이 나를 위해 일했다.

다음 모듈이 설치되었습니다.

"browser-sync": "^ 2.26.7",

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

"webpack": "^ 4.41.2",

"webpack-cli": "^ 3.3.9"

.js와 .ts 파일 사이에 문제가있었습니다. 왜 ?

프로젝트 빌드에서 Visual Studio는 typescript 파일을 .js 및 .js.map으로 컴파일합니다. webpack은 (awesome-typescript-loader로) typescript 파일도 처리하기 때문에 이것은 완전히 필요하지 않습니다. Visual Studio Code 에서 componet .tsx 파일을 편집 하거나 tsconfig.json에서 compileOnSave 옵션을 비활성화하면 편집 된 ts 파일이 다시 컴파일되지 않고 내 웹팩이 비정상적인 .js 파일을 처리했습니다.

해결책은 프로젝트 빌드시 Visual Studio에서 typescript 파일 컴파일을 비활성화하는 것입니다. 더하다

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

.csproj의 PropertyGroup에서.