Update definition files in watch mode in webpack@5 #1249
Conversation
| // compilation is actually of type webpack.compilation.Compilation, but afterProcessAssets | ||
| // only exists in webpack5 and at the time of writing ts-loader is built using webpack4 | ||
| const makeAssetsCallback = (compilation: any) => { | ||
| compilation.hooks.afterProcessAssets.tap('ts-loader', () => |
There was a problem hiding this comment.
Since this code block is only accessible for Webpack 5 you can use the new hook:
compilation.hooks.processAssets.tap({ name: 'ts-loader', stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL }, (_assets) => {
...
}
Webpack is already required, so no other changes needed.
There was a problem hiding this comment.
ts-loader is currently built using [email protected], which does not define webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, so although the code would run under webpack 4 and 5 it cannot be built under webpack4 if we include this.
Also, I think it is OK to use the afterProcessAssets hook. The various processAssets hooks provide a list of the assets that are being processed at that stage, but we are not using the list of assets. We just need a place to hook into where we can emit the assets and afterProcessAssets seems to work fine.
There was a problem hiding this comment.
No, please use compilation.hooks.processAssets, you can check webpack version using compiler.webpack (if exists it is webpack@5, if no it is webpack@4), also using compilation.hooks.processAssets I can implement cache, so it will speed build in watch mode
There was a problem hiding this comment.
I tried building ts-loader using compilation.hooks.processAssets but it will not build because webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL is not defined in webpack 4. If you try to build using webpack 5 there are other errors. I assume at some point in the future ts-loader will upgrade to webpack 5 but until then we cannot use anything not defined in webpack 4. afterProcessAssets is a valid webpack 5 hook so I'm not sure there is any reason to avoid using it.
There was a problem hiding this comment.
Example of usage https://github.com/webpack-contrib/terser-webpack-plugin/blob/v4.2.3/src/index.js#L647 (webpack@4 and webpack@5), on this (afterProcessAssets) hook I can't help with cache, so if you want speedup your build and do developers happy - OK
There was a problem hiding this comment.
Just note: maybe to do new major release with dropping webpack@4 is not bad idea
There was a problem hiding this comment.
Also I can help with cache and optimizations ⭐
|
Thanks @appzuka - could you update the Cheers! |
|
Thanks all - shipping now https://github.com/TypeStrong/ts-loader/releases/tag/v8.0.15 |
|
I've started work on the webpack 5 migration: Help gratefully received! I'm already stuck on a few API renames 😄 |
|
@johnnyreilly: I'll do whatever I can to help. How do we coordinate? |
|
Let's collaborate on the PR! |
See #1243 for discussion of problem and this fix.