美文网首页
使用webpack-dev-server在移动端调试时,出现"S

使用webpack-dev-server在移动端调试时,出现"S

作者: 程序猿吴彦祖 | 来源:发表于2018-10-09 10:00 被阅读0次

最近在移动端使用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置顶文件编译一下,如果还不行.. 换插件 - - !

相关文章

  • 使用webpack-dev-server在移动端调试时,出现"S

    最近在移动端使用nginx反向代理配合webpack-dev-server和charles调试时,发现部分手机打不...

  • 网页真机调试

    移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端...

  • 移动端真机调试

    移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机...

  • GitHub 榜单(进阶收尾)

    GitHub榜单 如何在移动端调试: 适配移动端 jsbin的url放到手机中实时刷新 npm browser-s...

  • H5在移动端的适配

    使用H5写移动端代码时,经常会遇到在PC端显示正常,但到移动端,会出现很多问题。常见问题如下: 移动端的双击或者双...

  • 解决MintUI使用Popup出现滑动穿透的问题

    问题描述: 在使用 Vue+mintui 做移动端的会页面开发时,列表使用的是 vue-infinite-s...

  • 遇到的坑(转)

    下面,就总结一下移动端遇见的坑。 1.input placeholder问题 在chrome 模拟移动端调试时[...

  • vuejs移动端项目总结

    下面说一些我在写移动端项目时总结的经验: 我们知道移动端click点击事件有300s延迟,为了正常使用click,...

  • 移动端项目在线调试

    使用browser-sync模块进行手机端调试 使用browser-sync可以让本地项目同步跑在电脑端和任何移动...

  • vconsole,lazyload,fastclick的引用

    移动端调试神器 vconsole的使用 vconsole github文档地址 vconsole的具体使用情况在文...

网友评论

      本文标题:使用webpack-dev-server在移动端调试时,出现"S

      本文链接:https://www.haomeiwen.com/subject/jwqeaftx.html