浅谈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自动刷新与解析