webpack-dev-server的使用

原创 在下乃坑爹君 随笔 WebPack 405阅读 2017-07-01 15:23:54 举报

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。

简单来说,webpack-dev-server就是一个小型的静态文件服务器。使用它,可以为webpack打包生成的资源文件提供Web服务,另外不管你怎么修改内容,都不需要手动刷新,它会自动刷新哦,挺给力的。

##安装
#####$ npm install webpack-dev-server --save-dev

有的人安装后出现了错误,大部分是版本不支持的问题,我也是其中之一,所以我就换了适合自己的稳定版本:
#####$ npm install webpack-dev-server@1.16.5 --save-dev
然后终端 webpack-dev-server

webpack-dev-server的使用

看下面图片,发现了不少问题,第一,头部很碍眼,看着烦,然后看看控制台那边,是iframe模式,最后个问题,你会发现不管点那个进去,网址里的路径都不会变

webpack-dev-server的使用

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。在iframe模式下:页面是嵌套在一个iframe下的,在代码发生改动的时候,这个iframe会重新加载;在inline模式下:一个小型的webpack-dev-server客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面。

使用iframe模式无需额外的配置,只需在浏览器输入
http://localhost:8080/webpack-dev-server/index.html
使用inline模式有两种方式:命令行方式和Node.js API。
1) 命令行方式比较简单,只需加入--line选项即可。例如:
webpack-dev-server --inline
使用--inline选项会自动把webpack-dev-server客户端加到webpack的入口文件配置中。
注意:使用webpack-dev-server命令行的时候,会自动查找名为webpack.config.js的配置文件。如果你的配置文件名称不是webpack.config.js,需要在命令行中指明配置文件。例如,我的配置文件是webpack.config.dev.js:webpack-dev-server --inline --config webpack.config.dev.js。
2) Node.js API方式需要手动把webpack-dev-server/client?http://localhost:8080加到配置文件的入口文件配置处,因为webpack-dev-server没有inline:true这个配置项

而我用的正式Node.js API方式实现的

webpack-dev-server的使用

所以我要还另外一个模式inline:

#####$ webpack-dev-server --inline --port 8088

先退出之前的webpack-dev-server(按键ctrl + c),然后#####$ webpack-dev-server --inline --port 8088,然后复制好本地测试地址,重新打开浏览器:

webpack-dev-server的使用

OK,看,都正常了,正常显示图片,正常路径,正常打印哈哈~

接下来 我们在src下view里面的index.html里,在body里打几个字,有个问题,不管是自动刷新还是你去手动刷新都无法显示内容,原因是没有设置publicPath去指定的构建后在html里的路径,接下来设置下:

javascript 代码

然后就可以自动刷新内容了·

##设置环境变量
javascript 代码

javascript 代码

评论 ( 1 )
最新评论
aaawhz 2017-07-06 11:12:23 1F

什么情况, 到这里没人点赞了, 我点一个