As per the webpack documentation on watching files
webpack can keep an eye on files and recompile them whenever there are changes.
My understanding is that this implies webpack will only compile the files that have been modified.
I have a configuration file named webpack.config.js structured like this:
module.exports = {
watch: true,
watchOptions: {
ignored: /node_modules/,
},
entry: {
"first": './web/assets/js/first.tsx',
"second": './web/assets/js/second.tsx',
},
// other stuff
}
However, when I run ./node_modules/.bin/webpack, the output log suggests that ALL files are being compiled,
Webpack is currently monitoring the files…
Hash: d0ac7b9d70b906068f77
Version: webpack 4.3.0
Time: 10462ms
Built at: 3/29/2018 11:50:43 AM
Asset Size Chunks Chunk Names
first.js 234 KiB 0 [emitted] first
second.js 739 bytes 1 [emitted] second
Entrypoint second = second.js
Entrypoint first = first.js
[13] ../locale-data/index.js (ignored) 15 bytes {0} [built]
[14] ./web/assets/js/react/component/First/First.tsx 1.05 KiB {0} [built]
[15] ./web/assets/js/translations/tr.ts 4.83 KiB {0} [built]
[16] ./web/assets/js/translations/it.ts 4.64 KiB {0} [built]
[17] ./web/assets/js/translations/fr.ts 4.78 KiB {0} [built]
[18] ./web/assets/js/translations/en.ts 4.31 KiB {0} [built]
[19] ./web/assets/js/translations/de.ts 4.67 KiB {0} [built]
[31] ./lib/locales (ignored) 15 bytes {0} [built]
[37] ./lib/locales (ignored) 15 bytes {0} [built]
[57] ./web/assets/js/first.tsx 559 bytes {0} [built]
[58] ./web/assets/js/second.tsx 350 bytes {1} [built]
+ 48 hidden modules
Even if I make a change in first.tsx, the output remains the same. It appears that every file is being recompiled instead of just the one that has changed. Is there something I'm missing or misunderstanding here?
My intention is to solely recompile the files that have undergone modifications which is how I believe webpack watch should operate.
Update: To further support this point, I deleted both compiled files, altered a line in one entry point, yet the watcher still compiled both.
Update2: Here are steps for reproduction
Steps to reproduce:
Assuming you already have yarn/npm installed.
- Clone my repository from https://github.com/tzfrs/webpack-watch-bug
- Initially run
yarn installornpm install. - Execute
./node_modules/.bin/webpack. This should generate two files in thedistfolder and automatically start watching. - Delete
dist/second.js - Make a change in
src/first.js src/second.jsremains unchanged but will still be recompiled (due todist/second.jsbeing recreated).