使用WebpackDevServer提升开发效率
WebpackDevServer的使用
修改webpack配置文件如下
我们现在有一个问题,就是每次我修改完代码,想在浏览器上运行都需要手动的打开命令行,执行 npm run bundle 这个命令重新打包一次,然后再手动的打开dist目录下的index.html。这样的话,我们的开发效率是非常低下的。
我们目前想要实现的是:如果我修改了src下面的源代码,dist目录下面的文件自动被打包修改,我再去页面看效果就简单多了。
要想实现这种功能,有三种做法。
首先打开package.json。我们每次运行 npm run bundle
实际上执行的是webpack命令,加上 --watch,打包的命令改为watch,index.js文件输出 hello world
执行 npm run watch
命令,打开打包后的index.html文件,可以看到控制台输出了 hello world。只要我们的源代码发生变化,我们的webpack就可以监听到变化,它就会重新打包。
以上是第一种做法,但是我希望当我第一次运行npm run watch的时候,打包后自动帮我们把浏览器打开,同时还可以去模拟一些服务器上的特性。这个时候仅仅是 webpack --watch这个配置就不够用了。我们可以借助 webpackDevServer来帮助我们实现更酷炫的效果。
安装 webpack-dev-server
cnpm install webpack-dev-server -D
我们对webpack.config.js添加devServer
我们再去写一个package.json中的脚本 “start”: “webpack-dev-server”
执行 npm run start 命令,发现报错,主要的原因是,webpack与webpack-dev-server不兼容。我这里webpack用的是5.9.0。这里我降低了webpack和webpack-cli的版本
更换版本之后,重新执行 npm run start 命令,打包成功会告诉我们服务器启动在本地8081的端口上
修改index.js输出内容,webpack自动打包,浏览器自动显示我们的输出结果
我们关闭浏览器在webpack.config.js中devServer做如下配置,
open: true
自动打开浏览器访问devserver服务器地址
这就是 webpack-dev-server的作用。我们为什么要开这样一个服务器呢?写过vue或者react的同学都知道,有时候在前端去写ajax请求,npm run bundle 打包命令下的index.html是file协议打开的
如果通过文件的形式打开index.html页面,如果想去发ajax请求就不行了。它要求你的文件在一个服务器上通过http协议的方式打开,但是现在通过file协议,肯定是不行的。如果使用webpack-dev-server,index.html文件是在一个http://localhost:8081的网址,http协议
再额外扩展一点东西:不管写react还是vue,里面都会有一个proxy这样的配置,实际上它是做接口跨域的时候,要使用的接口代理。为什么react和vue中可以使用接口代理呢?是因为他们脚手架的底层都是用了webpack-dev-server,而webpack-dev-server本身就支持这种跨域的代理。
如果用户访问服务器下面的 “/api”,这个路径的话。他会直接帮你转发到localhost:3000这个地址
webpack-dev-server除了contentBase和open这样的配置项以外还有很多
早期版本的vue-cli或者其它的一些比较老的脚手架工具,里面并没有使用webpack-dev-server而是自己实现了一个类似的server,因为早期webpack-dev-server并不是很稳定,配置项也不多。所以有的作者自己写了一个类似的工具,但是现在weboack-dev-server已经比较成熟了。
搭建类似webpack-dev-server
那么如何运行自己写的服务器呢?
我们现在package.json中添加一个指令 “server”:“node server.js”
这个server如果监听到src目录下的文件的内容有改变,它会像webpack-dev-server一样,自动帮助我们重启这个服务器,更新网页上的内容。怎么去写这个server.js?
我们用express(koa)来快速搭建,当然这个服务器要监听webpack文件的变化,然后帮我们自动的打包,所以我们还要借助一个webpack的开发中间件,叫做webpack-dev-middleware,现在安装一下
cnpm install express webpack-dev-middleware -D
我们现在尝试一下能不能启动我们的服务器:
npm run server
我们已经在3000端口启动了一个服务器
执行 npm run server 命令,在浏览器中打开 localhost:3000 ,输出如下内容,
修改index.js中输出的内容
自动帮我们打包,但是我们需要到浏览器手动刷新,此时打印输出的就是修改之后的内容
我们可以发现我们的server没有webpack-dev-server这么智能,所以还是建议使用webpack-dev-server
原文地址:https://blog.csdn.net/frontendchen/article/details/110468097
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。