webpack-dev-server的简单配置
已被阅读 1085 次 | 文章分类:nodejs | 2018-10-27 00:05
webpack-dev-server是在nodejs环境中使用的一个小型web服务器，通过它可以在本地直接部署运行网站，而且可以通过设置项设置网站运行的各种属性，和iis、apache、tomcat等Web服务器类似
一:安装webpack-dev-server
1.首先构建一个简单工程目录,如下图;这里就不再配置webpack打包，仅仅讲述webpack-dev-server的部分
//index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="testDiv"></div>
<script src="./src/index.js"></script>
</body>
</html>
//javascript.html
document.getElementById("testDiv").innerHTML="<h1>webpack dev server demo</h1><br /><p>hello xiaobai</p>"
2. 安装webpack-dev-server并添加到依赖，因为只是程序运行需要所以添加到dev依赖中
npm install --save-d webpack-dev-server
3. 为避免每次输入执行命令，在package.json中加入运行脚本
"dev": "webpack-dev-server"
至此准备工作结束了，我们执行npm run dev,看到如下结果便是成功了
可以访问localhost:8080,来打开网页，这里如果没有端口，默认8080
二:devServer配置
上面只是安装完成webpack-dev-server,通过默认方式运行，下面是具体的配置项，可自行修改查看效果
devServer:{
contentBase: path.join(__dirname,"/"), //指定服务器 index.html 资源的根目录
port:6000, //设置端口号
host:'localhost', //设置主机
inline:true, //开启inline 我们保存完服务器端代码后，不需要再次运行命令即可刷新网页查看新效果
hot:true, //启动热模块 开启模块热替换功能后，可以在不刷新整个页面的情况下 实现实时预览
open:true, //启动命令后，自动打开网页地址
openPage, //配置项用于打开指定 URL 的网页。
compress:true, // 是否启用代码压缩,默认false
historyApiFallback:{ //指定页面
rewrites:[
{from:/./,to:'./404.html'} //指定404页面
]
},
allowedHosts: [ //配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回
//匹配单个域名
'www.xiaobaigis.com',
'sub.xiaobaigis.com',
// xiaobaigis.com 和所有的子域名都将匹配
'.xiaobaigis.com'
],
disableHostCheck:true //配置是否关闭用于DNS重绑定的HTTP请求的host检查
}