webpackのwatch(-w)オプションを付けることでファイル更新のたびにバンドルし直してくれる。
差分ビルドなので2回目以降のビルドが早くなる。
1回目は1343ms
$ npx webpack -w
asset main.js 299 bytes [compared for emit] [minimized] (name: main)
./src/index.ts 162 bytes [built] [code generated]
./src/hoge.ts 123 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.11.0 compiled with 1 warning in 1343 ms
asset main.js 318 bytes [emitted] [minimized] (name: main)
./src/index.ts 182 bytes [built] [code generated]
./src/hoge.ts 123 bytes [built] [code generated]
ファイルを変更し保存するとビルドが走り341msかかった。
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.11.0 compiled with 1 warning in 341 ms
watchから除外するオプションもある。watchOptionsのignoredにpathを指定すると除外される。
webpack.config.js
module.exports = {
watchOptions: {
ignored: /node_modules/
}
}
他にもコンパイルをまとめて行えるようにするaggregateTimeoutオプションや
module.exports = {
//...
watchOptions: {
aggregateTimeout: 600
}
};
ポーリングさせて指定間隔ごとにコンパイルさせるpollオプションがある。
(これは試してみたけど動作していない？？？)
module.exports = {
//...
watchOptions: {
poll: 1000 // Check for changes every second
}
};