webpack监视不会触发

Question

I run webpack with native file system (inotify) support, also tested with chokidar and it correctly picked up all changes to files on that filesystem/folder.

The webpack configuration in Sage 9 WordPress base theme is used ( https://github.com/roots/sage/blob/c21df9965ff8217c3b4ff90bbe6099206d7b4fbf/resources/assets/config.json#L16 ). Only the PHP files are listed for being watched on - but their dependencies (SCSS/JS/...) are also watched?

I start webpack watch with npm/yarn package script that starts webpack with $ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files… [BS] [HTML Injector] Running... [BS] Proxying: http://dev:8084 [BS] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://127.0.0.1:3000 ---------------------------------- UI: http://localhost:3001 UI External: http://127.0.0.1:3001 ---------------------------------- [BS] Watching files...

However, changing files - even just the PHP files specified in watch array above - doesn't trigger any update by webpack. What config could be missing? Are there any ways finding out what exactly is webpack watching - and whether it really detects a change (and just ignores it) or not?

Answer 1

The reason was CORS, the script that should load new webpack builds is blocked by browser due to CORS restrictions. It is possible to configure browserSync to send proper headers for CORS, also see https://discourse.roots.io/t/sage-9-browsersync-not-loading-any-css-at-all-on-yarn-run-start/11332/26 .

new BrowserSyncPlugin({ target, open: config.open, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, advanced: { browserSync: { cors: true, }, }, }),