Watch and WatchOptions

Webpack은 파일이 변경될 때마다 이를 감지하여 다시 컴파일 할 수 있습니다. 이 페이지에서는 변경감지가 제대로 작동하지 않는 경우, 이 기능을 활성화 하는 방법과 몇가지 조정에 대해 설명합니다.

watch

boolean = false

watch 모드를 켭니다. 이제 초기 빌드 후 webpack은 해석 된 파일의 변경 사항을 계속 감시합니다.

webpack.config.js

module.exports = {
  //...
  watch: true,
};

watchOptions

object

watch 모드를 사용자 지정하는 데 사용되는 일련의 옵션입니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

number = 20

첫 번째 파일이 변경된 후 다시 빌드하기 전에 지연을 추가합니다. 이를 통해 webpack은 이 기간 동안 일어난 다른 모든 변경 사항을 하나의 재빌드로 합칠 수 있습니다. 값은 밀리초(ms) 단위로 전달합니다.

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp string [string]

일부 시스템의 경우 많은 파일을 감시하다보면 CPU나 메모리 사용량이 증가할 수 있습니다. 정규 표현식을 사용하여 node_modules와 같은 거대한 폴더를 제외할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/,
  },
};

또는, 전역 패턴을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
  },
};

여러 개의 전역 패턴을 사용할 수도 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

또한 절대 경로를 지정할 수 있습니다.

const path = require('path');
module.exports = {
  //...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
  },
};

전역 패턴을 사용할 때는, glob-to-regexp를 이용하여 정규 표현식으로 변환하기 때문에 watchOptions.ignored에 전역 패턴을 사용하기 전에 미리 익숙해지면 좋습니다.

watchOptions.poll

boolean = false number

기본 폴링 간격을 5007로 설정하는 true를 전달하거나 폴링 간격을 밀리초(ms)로 지정하여 polling을 사용할 수 있습니다.

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
};

watchOptions.followSymlinks

파일을 찾는 동안 심볼릭 링크를 따라갑니다. webpack이 이미 resolve.symlinks를 사용하여 심볼릭 링크를 해석했으므로 대개 이 작업이 필요하지는 않습니다.

• 타입: boolean

• 예시는 다음과 같습니다.

  module.exports = {
    //...
    watchOptions: {
      followSymlinks: true,
    },
  };

watchOptions.stdin

stdin 스트림이 종료되면 감시를 중단합니다.

• Type: boolean

• Example:

  module.exports = {
    //...
    watchOptions: {
      stdin: true,
    },
  };

Troubleshooting

문제가 발생하면 다음 참고 사항을 확인하세요. webpack이 파일 변경을 놓칠 수 있는 이유는 다양합니다.

Changes Seen But Not Processed

--progress 플래그와 함께 webpack을 실행하여 webpack에 변경 사항이 전달되지 않는지 확인하세요. 저장할 때 진행 상황이 표시되지만 파일이 출력되지 않으면 파일 감시 문제가 아니라 구성 문제일 수 있습니다.

webpack --watch --progress

Not Enough Watchers

시스템에 사용 가능한 감시자가 충분한 지 확인하세요. 이 값이 너무 낮으면, Webpack의 파일 감시자가 변경 사항을 인식하지 못합니다.

cat /proc/sys/fs/inotify/max_user_watches

Arch 사용자는, /etc/sysctl.d/99-sysctl.conf에 fs.inotify.max_user_watches=524288을 추가한 후 sysctl --system을 실행합니다. Ubuntu 사용자 및 기타 사용자는 다음과 같이 실행합니다: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

macOS fsevents Bug

macOS에서는, 특정 시나리오에서 폴더가 손상될 수 있습니다. 이 기사를 참고하세요.

Windows Paths

webpack은 __dirname + '/app/folder'와 같은 많은 설정 옵션에서 절대 경로를 사용할 것으로 기대하기 때문에 윈도우의 \ 경로 구분 기호는 일부 기능을 손상시킬 수 있습니다.

올바른 구분 기호를 사용하세요. 예를들면, path.resolve(__dirname, 'app/folder') 이나 path.join(__dirname, 'app', 'folder')와 같이 사용하세요.

Vim

일부 시스템에서는 Vim은 백업 카피 옵션이 auto로 미리 설정되어 있습니다. 이로 인해 시스템의 파일 감시 메커니즘에 문제가 발생할 수 있습니다. 이 옵션을 yes로 전환하면 파일의 복사본이 만들어지고 저장 시 원본을 덮어쓰게 됩니다.

:set backupcopy=yes

Saving in WebStorm

JetBrains WebStorm IDE를 사용할 때, 변경된 파일을 저장해도 예상대로 감시자에게 트리거되지 않을 수 있습니다. 원래 파일을 덮어쓰기 전에 먼저 임시 위치에 저장할지 결정하는 설정에서 Back up files before saving 옵션을 비활성화 해 보세요. 이는 메뉴에서 다음과 같이 설정할 수 있습니다. File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving Webstorm의 일부 버전에서 이 옵션은 "safe write" 사용(변경 사항을 임시 파일에 먼저 저장합니다)이라고 불릴 수 있습니다.