浅谈webpack自动刷新与解析

　　

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

　　

<强> webpack-dev-serverwebpack

　　

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

　　

<强> 1。安装

　　 　　 　　npm安装webpack-dev-server——save-dev 　　 　　

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

　　

<强> 2. npm启动

　　

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

　　 　　 　　"脚本":{ 　　“开始”:“webpack-dev-server——env发展”, 　　“构建”:“webpack——env生产” 　　} 　　 　　

现在就可以通过npm开始运行或者npm开始来启动了。

　　

浅谈webpack自动刷新与解析

　　

启动之后,可以看到项目运行在http://localhost: 8080上面。打开页面

　　

浅谈webpack自动刷新与解析

　　

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

　　

浅谈webpack自动刷新与解析

　　

<强> 3。直接启动

　　

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

　　 　　 　　webpack-dev-server - env发展 　　 　　

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

　　
　　

C: \ \ Administrator.9BBOFZPACSCXLG2 \ AppData \漫游用户\ npm; C: \程序文件(x86) \ \ bin微软VS代码;E: \ Html5 \ node_modules \。斌

　　 　　

浅谈webpack自动刷新与解析

　　

<强> 4.8080端口占用

　　8080年

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

　　 　　 　　服务器{ 　　听8080; 　　位置/{ 　　Html5根E://构建; 　　指数指数。html你; 　　} 　　} 　　 　　

再启动WDS:

　　

浅谈webpack自动刷新与解析

　　

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

　　 　　 　　devServer: {//? 　　端口:9000 　　} 　　 　　

<强> nodemon自动启动

　　

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

　　 　　 　　npm安装nodemon——save-dev 　　 　　

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

　　 　　 　　"脚本":{ 　　“开始”:“nodemon——看webpack.config。js - exec \“webpack-dev-server - env发展\””, 　　“构建”:“webpack——env生产” 　　}, 　　 　　

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

　　

浅谈webpack自动刷新与解析

　　

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

　　

<强>代理

　　

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

浅谈webpack自动刷新与解析