fork-ts-checker-async-overlay-webpack-plugin
v0.4.0
Published
Webpack plugin that connects fork-ts-checker-webpack-plugin (async: true) to error overlay of webpack-dev-server.
Downloads
46
Readme
Fork TS Checker Async Overlay Webpack Plugin
Webpack plugin that connects fork-ts-checker-webpack-plugin (async: true) to error overlay of webpack-dev-server.
What
This plugin enables fork-ts-checker-webpack-plugin to show type check errors in overlay of webpack-dev-server, without specifying async: false
option (which slows down).
By default fork-ts-checker-webpack-plugin runs type checking after compilation, so result is pushed to webpack-dev-server client before type check is done.
So this plugin re-fires done
hook of webpack-dev-server after type checking is done (bit hacky).
Installation
Please setup fork-ts-checker-webpack-plugin first.
For convenient, you can concat thisPlugin.plugins()
to plugins array. Or you can add these plugins one-by-one.
Don't forget to remove async: false
option of fork-ts-checker-webpack-plugin to get speed up with this plugin.
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const ForkTsCheckerAsyncOverlayWebpackPlugin = require('fork-ts-checker-async-overlay-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.tsx?$/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true
}
},
exclude: /node_modules/
}
]
},
...
plugins: [
...
].concat(
new ForkTsCheckerAsyncOverlayWebpackPlugin({
checkerPlugin: new ForkTsCheckerWebpackPlugin()
}).plugins()
),
devServer: {
overlay: true, // important
inline: true
}
}
Limitation (important)
Only errors (NOT warnings) are shown in overlay. webpack-dev-server reloads window if re-firing done hook without errors. To prevent it, this plugin only re-fire if there are any errors. It'd better to have async error reporting feature in webpack-dev-server itself.
License
MIT