在之前的所有篇幅里,我们每次更改一个文件,都要自己去启动 http-server, 再刷新浏览器,我们希望这个动作自动刷新完成。
Webpack 提供一个可选的本地开发服务器插件 webpack-dev-server, 它是一个小型的 Node.js Express服务器,它使用 webpack-dev-middleware 来服务于 webpack 的包,除此之外,它还有一个通过 Sock.js 来连接到服务器的微型运行时.
接上一篇的代码, 先来安装一下webpack-dev-server, 本篇指定了版本为2.11.1
1 | $ npm i webpack-dev-server@2.11.1 -D |
安装好以后,执行命令:
1 | $ webpack-dev-server |
不带参数运行 webpack-dev-server 命令,默认会读取 webpack.config.js 进行打包,也可以通过 -config 来指定配置文件。
所有的 Webpack 命令接受的参数,webpack-dev-server 都可以接受,除此之外,我们还可以向 webpack-dev-server 传递额外的参数,webpack-dev-server 命令行相关配置项如下:
- content-base:指定请求的根路径;
- host:指定服务器鉴定的地址可以是IP地址或者域名,当值为0.0.0.0时,可以监听一台机器的所有IP地址,如127.0.0.1或机器在局域网中的IP地址;
- port:指定服务器监听的端口号。
- compress:启用gzip压缩;
- inline:自动将Socket.IO代码注入到打包后的文件中,启用该选项,当文件内容改变时可以自动刷新浏览器。
我们将module.js中的改为:
module.exports = ‘这里是更改后的模块内容’
不用刷新浏览器,更改后的内容就显示在浏览器了。
现在 webpack-dev-server 的配置放到 webpack.config.js 中。
1 | const webpack = require('webpack'); |
启动 webpack-dev-server 后, 打开浏览器输入127.0.0.1:8080, 观察一下效果。
最后把 ebpack-dev-server 命令加入到 package.json 的 script 脚本中, 如下:
1 | { |
执行 npm start 命令,即可开启 webpack-dev-server 服务。
本实例源码