开发服务器DevServer

为什么要用webpack-dev-server

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

webpack-dev-server 安装及配置

用以下命令进行安装：
npm install webpack-dev-server —save-dev

“scripts”: {
“build”: “webpack”,
“dev”: “webpack serve”
},

devServer.port

//设置端口号为7000:

devServer.host

//host设置的是服务器的主机号：

devServer.historyApiFallback

//这个配置属性是用来应对返回404页面时定向到特定页面用的
rewrites:[
{from:/./,to:’/404.html’}
]

devServer.overlay

//这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，可设置为true
//首先我们人为制造一个编译错误：在我们尚未配置babel loader的项目里使用ES6写法：
//在src/index.js里写入“const a”
// overlay: true
//再重新运行node_modules/.bin/webpack-dev-server，浏览器上把错误显示出来了

devServer.stats（字符串）

//**stats: “errors-only”表示只打印错误：
//**因为只有错误才被打印，所以，大多数信息都略过了

devServer.quiet

//当这个配置属性和devServer.stats属于同一类型的配置属性
//当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告
//来做个对比吧：

quiet：false（默认）：

//第一次编译：

//第二次编译（当你保存的时候）

quiet:true

devServe.contentBase: “./“,

//本地服务器的搭建目录，默认为当前目录

devServe.inline:true,

//实现自动刷新（必须在命令行输入—inline）

devServe.progress:true,

//显示打包进程（必须在命令行输入--hot）<br />

devServe.hot:true,

 //实现热加载    _     _<br />

devServe.port:8080

 //设置端口

devServe.congress：true

    //  支持压缩

后面dev 可添加的

1. —open： //打开默认浏器，index.html
   
2. —config webpack.config.js //运行webpack。cofig.js文件
   
3. —hot： //实现热替换
   
4. —inline: //实现自更新
   
5. —quiet // 控制台中不输出打包的信息
   
6. —compress //开启gzip压缩
   
7. —progress //显示打包的进度
   
8. —colors: //进度用颜色表示