前言

我们的项目采用的是Webpack@5+react@17，希望兼容到IE浏览器（IE 9+，不含IE9）

浏览器兼容性

问题排查

如果发现页面无法在IE浏览器中打开，请依次确认以下配置是否正确：

• 查看.browserslistrc是否配置了IE浏览器，浏览器的型号需要明确设置，不设置等同于不兼容，笔者的设置是ie > 9
• 确保在代码最顶端引入了React所需要的polyfill（ 详见 ），facebook官方出品的 react-app-polyfill 可以帮助你简化上述工作，只需要在最顶端引入react-app-polyfill即可。如import 'react-app-polyfill/ie9';或import 'react-app-polyfill/ie11';
• 不要用到一些IE既不支持也没有polyfill的特性，如classList.value，考虑用className替代
• 如果希望在devServer模式下可以在IE中开发，则需要关闭hot以及webSocketServer功能（值设置为false）并且不要使用webpack.HotModuleReplacementPlugin（webpack中的webSocket对IE的影响不是很稳定，如果遇到问题，此方案可以一试）
• 如果你的IE浏览器版本不对，例如虽然是IE11，但打开网页时却是按照IE8（或其它）打开的，那么需要考虑是不是设置了兼容模式，可以清掉后再试（方法是：设置-兼容性视图设置-删除添加的网址）

注意：如果上述均已经配置妥当，但依然白屏，且报错信息比较模糊，则可以将Webpack的devtool设置为source-map，此时源码被原样保留，方便调试

解误

• 有些资料里强调为了兼容IE需要设置target: ['web', 'es5']，实际上经过测试，发现不设置也没问题，因为我们的项目里有.browserslistrc，会对生成的代码兼容性发挥作用