webpack-dev-server启动开发服务器本篇文章主要为一个webpack-devv-serve使用教程，旨在引

第一步，创建一个新文件夹，然后再文件夹内打开控制台初始化package.json。

npm init -y

然后安装webpack-cli、webpack、webpack-dev-server，因为版本兼容性问题，上面所叙述插件都使用了固定版本的。

npm intsall -D webpack@5.36.2 webpack-cli@3.3.12 webpack-dev-server@3.11.2 然后我们修改package.json,添加启动命令和打包命令。


{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development",  //添加启动命令
    "build": "webpack --mode production"  //添加打包命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.36.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

第二部分，我们开始配置文件入口，服务等。

在文件夹内新建src文件夹，来当做我们启动服务映射的文件位置。

src内创建一个index.html作为页面模板。


<!-- // src/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  Hello
</body>
<script src="/bundle.js"></script>
</html>

上述中的bundle.js就是webpack打包后的main.js里所关联的资源，因为是热启动，所以路径有些许不一样，并不是真实的物理地址。

接着在根目录新建webpack.config.js配置文件,更多配置项目可以参考官网开发服务器配置


// webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/main.js', //入口文件
	output: {
		path: path.join(__dirname, './dist'), //打包位置 
		filename: 'bundle.js', //打包后文件名称
	},
	devServer: {  //本地调试服务配置
		port: 80, //端口   
		host: '0.0.0.0', //局域网访问可填写'0.0.0.0'
		hot: true, //启动热更新 
		filename: 'bundle.js', //入口文件引入
		contentBase: path.join(__dirname, 'src'), //映射资源目录位置 
	},
};

最后在控制台输入 npm run dev 启动开发服务器。

打开浏览器，输入http://127.0.0.1/#，就可以看到网页的雏形啦。

然后就可以在main.js里面开始扩展咯。