最近在移动端使用nginx反向代理配合webpack-dev-server和charles调试时，发现部分手机打不开页面，现象是白屏，或是页面不正常(包括样式等)。
已经排除各种配置的问题。
推断可能是某些代码在老旧机型上不兼容，直接报错，导致程序crash，在入口模板html中插入了一段全局错误捕捉脚本：
window.onerror = function(message) {
alert(message)
}
这里需要注意一点，先监听事件，后续的错误才会触发该事件。
再次进入要调试的页面，弹出SyntaxError: Use of const in strict mode.错误。
原因:
webpack-dev-server从2.8.0版本开始，注入到bundle.js中js包含了es6语法，低版本webview对es6语法支持有限，兼容性较差，语法报错导致程序crash（白屏和页面不正常的原因），项目使用的版本是2.9.1。
查看bundle.js可见如下代码：
/* 2 */
/*!*******************************************************************!*\
!*** multi (webpack)-dev-server/client?http://0.0.0.0:3000 ./app ***!
\*******************************************************************/
/*! dynamic exports provided */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! /Users/elsa/workspace/webpack/webpack2.x+/node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:3000 */3);
module.exports = __webpack_require__(/*! /Users/elsa/workspace/webpack/webpack2.x+/webpack-dev-server/在老旧浏览器报错的问题/app */25);
/***/ }),
这是webpack-dev-server设置inline:true时注入到bundle.js文件中的，通过websocket通知浏览器进行livereload，webpack_require(3)这一句去加载node_modules/webpack-dev-server/client/index.js文件，该文件2.7.1和2.8.0的源码如下：
https://github.com/webpack/webpack-dev-server/blob/v2.8.0/client/index.js
https://github.com/webpack/webpack-dev-server/blob/v2.7.1/client/index.js
对比可知，2.8.0版本开始，该文件使用了es6的const和let语法，__然而，我们开发的时候，使用webpack编译时，babel-loader一般都会指定要排除的目录如下：
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
}
}
]
}
所以，babel-loader并不会将node_modules/webpack-dev-server/client/index.js转换为es5的语法。
解决方案：
通过降级webpack-dev-server到2.7.1版本 - 测试通过
使用babel-loader时，在非生产环境配置中，额外指定对node_modules/webpack-dev-server/client/index.js脚本的转换 - 测试通过
参考链接：
webpack/webpack-dev-server#1105
https://github.com/webpack/webpack-dev-server#caveats
原文地址
https://github.com/mrdulin/blog/issues/35
也有可能是某个插件使用了es6写法, 具体看打包后的js 定位到出错的插件, 用babel-loader置顶文件编译一下,如果还不行.. 换插件 - - !
网友评论