Amezui React编译错误在网页上提示怎么实现？

Question

如图：

Amaze React版运行gulp后命令后，编译报错会在网页显示，感觉很方便，就是不知道使用哪个插件实现的，各位有了解的吗？

Answer 1

找到解决方法了。确实是webpack-hot-middleware自带的功能，只不过不能配合webpack-dev-server，可以配合gulp或express使用。

Additionally, webpack-hot-middleware displays syntax errors in an overlay, which WebpackDevServer doesn’t do.
However, you can use WebpackDevServer instead of the custom server just fine.

具体的可以参考Github工程：react-transform-boilerplate

PS：使用react-hot-loader

Answer 2

那是因为amazeui-react用了webpack-hot-middleware

你可以参考其中的config ＝> overlay配置：

• path - The path which the middleware is serving the event stream on

• timeout - The time to wait after a disconnection before attempting to reconnect

• overlay - Set to false to disable the DOM-based client-side overlay.

• reload - Set to true to auto-reload the page when webpack gets stuck.

• noInfo - Set to true to disable informational console logging.

• quiet - Set to true to disable all console logging.

• dynamicPublicPath - Set to true to use webpack publicPath as prefix of path. (We can set __webpack_public_path__ dynamically at runtime in the entry point, see note of output.publicPath)

其中，如果你把overlay设置成false，如下：

webpack-hot-middleware/client?reload=true&overlay=false

错误遮罩就没了。如果想看遮罩源码(我没研究过)，但应该是这里client-overlay.js