浅谈webpack 自动刷新与解析


Posted in Javascript onApril 09, 2018

前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整;而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下;另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手工刷新浏览器和手动(或点击)发布,还要启动站点,确实是个不小的体力活。而这三点webpack可以帮我们做到。

webpack-dev-serverwebpack

是通过webpack-dev-server(WDS)来实现自动刷新。WDS是一个运行在内存中的开发服务器(一个express)。启动之后,它会检测文件是否发生改变并再自动编译一次。

1.安装

npm install webpack-dev-server --save-dev

先通过npm将其安装到开发目录。安装完成之后会在node_modules/bin下找到。

2.npm启动

然后修改package.json:(基于上一节)

"scripts": {
  "start": "webpack-dev-server --env development",
  "build": "webpack --env production"
 }

现在就可以通过npm run start 或者 npm start来启动了。

浅谈webpack 自动刷新与解析

启动之后,可以看到Project is running at http://localhost:8080 上面。打开页面

浅谈webpack 自动刷新与解析

说明WDS已经帮我们自动建了一个站点.我们修改component.js ,cmd中会出现编译,页面会自动刷新。

浅谈webpack 自动刷新与解析

3.直接启动

官网介绍可以直接通过下面的命令启动WDS。

webpack-dev-server --env development

但会出现webpack-dev-server --env development 不是内部命令的提示,这种问题都是环境变量的问题,将你开发的bin目录设置到环境变量中即可,比如我的目录是‘E:\Html5\node_modules\.bin',就加上分号写在后面。

C:\Users\Administrator.9BBOFZPACSCXLG2\AppData\Roaming\npm;C:\Program Files (x86)\Microsoft VS Code\bin;E:\Html5\node_modules\.bin

浅谈webpack 自动刷新与解析

4.8080端口占用

如果默认的8080端口占用,WDS会换一个。比如用nginx先发布一个。

server{
   listen    8080;
   location / {
      root  E:/Html5/build;
      index index.html index.htm;
    }
  }

再启动WDS:

浅谈webpack 自动刷新与解析

端口切到了8081。也可以手动配置端口:

devServer:{
  //...
  port: 9000
}

nodemon 自动启动

WDS是监视开发文件的,webpack.config.js改变不会引起自动启动。所以我们需要nodemon去做这件事情。

npm install nodemon --save-dev

先安装在开发目录,然后修改package.json:

"scripts": {
  "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
  "build": "webpack --env production"
 },

等于让nodemon去监视webpack.config.js,变化了就去启动它。

浅谈webpack 自动刷新与解析

这样就你可以让你的双手专心的开发了。

代理

不过有一点疑问,就是WDS这个站点的替代性,因为我们自己部署的nginx有一些api的代理。如果挂在WDS的这个默认站点上自然是无法访问的。换句话说可否给WDS配置一个刷新路径。如果文件改变去刷新指定的地址,或者让我去配个代理。既然它本身是一个http服务器,肯定也有代理的功能。搜了下果然有:https://github.com/webpack/webpack-dev-server/tree/master/examples/proxy-advanced

module.exports = {
  context: __dirname,
  entry: "./app.js",
  devServer: {
    proxy: {
      "/api": {
        target: "http://jsonplaceholder.typicode.com/",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        },
        bypass: function(req) {
          if(req.url === "/api/nope") {
            return "/bypass.html";
          }
        }
      }
    }
  }
}

即将api这个字段替换成http://jsonplaceholder.typicode.com/,并将其从原地址中删掉,这样就可以自己实现代理了。皆大欢喜!WDS是通过http-proxy-middleware来实现代理。更多参考:http://webpack.github.io/docs/webpack-dev-server.html;https://github.com/chimurai/http-proxy-middleware#options

but,这种刷新是怎么实现的呢?因为页面上没有嵌入什么别的js,去翻原码 web-dev-server/server.js中有这么一段:

Server.prototype._watch = function(path) {
  const watcher = chokidar.watch(path).on("change", function() {
    this.sockWrite(this.sockets, "content-changed");
  }.bind(this))

  this.contentBaseWatchers.push(watcher);
}

用chokidar来监视文件变化,server的内部维护的有一个socket集合:

Server.prototype.sockWrite = function(sockets, type, data) {
  sockets.forEach(function(sock) {
    sock.write(JSON.stringify({
      type: type,
      data: data
    }));
  });
}

sock是一个sockjs对象。https://github.com/sockjs/sockjs-client,从http://localhost:8080/webpack-dev-server/页面来看,sockjs是用来通信记录日志的。

var onSocketMsg = {
  hot: function() {
    hot = true;
    log("info", "[WDS] Hot Module Replacement enabled.");
  },
  invalid: function() {
    log("info", "[WDS] App updated. Recompiling...");
    sendMsg("Invalid");
  },
  hash: function(hash) {
    currentHash = hash;
  },
...
}

我们在看app.js,其中有一个OnSocketMsg 对象。

var onSocketMsg = {
  hot: function() {
    hot = true;
    log("info", "[WDS] Hot Module Replacement enabled.");
  },
  invalid: function() {
    log("info", "[WDS] App updated. Recompiling...");
    sendMsg("Invalid");
  },
  hash: function(hash) {
    currentHash = hash;
  },
  "still-ok": function() {
    log("info", "[WDS] Nothing changed.")
    if(useWarningOverlay || useErrorOverlay) overlay.clear();
    sendMsg("StillOk");
  },
  "log-level": function(level) {
    logLevel = level;
  },
  "overlay": function(overlay) {
    if(typeof document !== "undefined") {
      if(typeof(overlay) === "boolean") {
        useWarningOverlay = overlay;
        useErrorOverlay = overlay;
      } else if(overlay) {
        useWarningOverlay = overlay.warnings;
        useErrorOverlay = overlay.errors;
      }
    }
  },
  ok: function() {
    sendMsg("Ok");
    if(useWarningOverlay || useErrorOverlay) overlay.clear();
    if(initial) return initial = false;
    reloadApp();
  },
  "content-changed": function() {
    log("info", "[WDS] Content base changed. Reloading...")
    self.location.reload();
  },
  warnings: function(warnings) {
    log("info", "[WDS] Warnings while compiling.");
    var strippedWarnings = warnings.map(function(warning) {
      return stripAnsi(warning);
    });
    sendMsg("Warnings", strippedWarnings);
    for(var i = 0; i < strippedWarnings.length; i++)
      console.warn(strippedWarnings[i]);
    if(useWarningOverlay) overlay.showMessage(warnings);

    if(initial) return initial = false;
    reloadApp();
  },
  errors: function(errors) {
    log("info", "[WDS] Errors while compiling. Reload prevented.");
    var strippedErrors = errors.map(function(error) {
      return stripAnsi(error);
    });
    sendMsg("Errors", strippedErrors);
    for(var i = 0; i < strippedErrors.length; i++)
      console.error(strippedErrors[i]);
    if(useErrorOverlay) overlay.showMessage(errors);
  },
  close: function() {
    log("error", "[WDS] Disconnected!");
    sendMsg("Close");
  }
};

ok的时候触发一个reloadApp

function reloadApp() {
  if(hot) {
    log("info", "[WDS] App hot update...");
    var hotEmitter = __webpack_require__("./node_modules/webpack/hot/emitter.js");
    hotEmitter.emit("webpackHotUpdate", currentHash);
    if(typeof self !== "undefined") {
      // broadcast update to window
      self.postMessage("webpackHotUpdate" + currentHash, "*");
    }
  } else {
    log("info", "[WDS] App updated. Reloading...");
    self.location.reload();
  }
}

也就是说WDS先检测文件是否变化,然后通过sockjs通知到客户端,这样就实现了刷新。之前WebSocket的第三方只用过socket.io,看起来sockjs也蛮好用的。不必外带一个js,在主js里面就可以写了。

小结:效率提高的一方面是将一些机械的重复性流程或动作自动化起来。WDS和nodemon就是两个为你干活的小弟。

demo:webpack-ch2_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
chrome原生方法之数组
Nov 30 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
angularJS深拷贝详解
Mar 23 Javascript
jquery实现下载图片功能
Jul 18 jQuery
JavaScript实现图片轮播特效
Oct 23 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 #Javascript
详解webpack 入门与解析
Apr 09 #Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 #Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 #Javascript
vue组件详解之使用slot分发内容
Apr 09 #Javascript
vue组件中使用props传递数据的实例详解
Apr 08 #Javascript
Vue入门之animate过渡动画效果
Apr 08 #Javascript
You might like
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP APC缓存配置、使用详解
2014/03/06 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
数控专业个人求职信范例
2013/11/29 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
顶撞领导检讨书
2014/01/29 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
土地转让协议书
2014/09/27 职场文书
颐和园英文导游词
2015/01/30 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电