使用webpack3.0配置webpack-dev-server教程
本文主要介绍使用webpack3.0配置webpack-dev-server的教程，旨在帮助读者快速搭建一个小型的服务器。下面我们将详细介绍webpack-dev-server的配置和原理。
一、webpack-dev-server简介
webpack-dev-server是一个独立的npm包，用于搭建一个小型的服务器，方便开发者在开发过程中快速预览和测试应用程序。使用webpack-dev-server可以实现自动刷新、热模块替换等功能。
二、安装webpack-dev-server
使用webpack-dev-server之前，需要首先安装它，可以使用以下命令安装：
```
npm install webpack-dev-server --save-dev
```
三、配置webpack-dev-server
在webpack.config.js文件中，我们可以对webpack-dev-server进行配置。下面是一个基本的配置示例：
```
const path = require("path");
module.exports = {
entyr:{
....... //设置入口文件
},
output:{
....... //设置出口文件
},
module:{
....... //配置loader，注意使用rules而不是loaders
},
plugins:[
....... //注意是数组
],
devServer:{
//我们在这里对webpack-dev-server进行配置
}
}
```
四、devServer配置对象属性
在devServer中，我们可以配置以下几个常用的属性：
1. contentBase："./" // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向index.html页面；
3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；
4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，我们姑且也设置为true，之后再看；
5. port：端口号(默认8080) // 这就不用我多说了吧；
五、热模块替换
在devServer中，我们可以使用hot属性来启用热模块替换特性，但是需要使用webpack.HotModuleReplacementPlugin插件。下面是一个基本的配置示例：
```
const path = require("path");
const webpack = require("webpack");
module.exports = {
entyr:{
....... //设置入口文件
},
output:{
....... //设置出口文件
},
module:{
....... //配置loader，注意使用rules而不是loaders
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer:{
//我们在这里对webpack-dev-server进行配置
}
}
```
六、总结
本文主要介绍了使用webpack3.0配置webpack-dev-server的教程，包括安装webpack-dev-server、配置webpack-dev-server和热模块替换等内容。通过本教程，读者可以快速搭建一个小型的服务器，提高开发效率和体验。
