webpack-dev-server 使用教程
webpack-dev-server是我们在开发nodejs必须要掌握的工具，它可以帮助我们快速搭建开发环境。官网介绍如下
Use webpack with a development server that provides live reloading. This should be used for development only. It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.
简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它可以为wepack打包生成的资源文件提供Web服务
安装
$ npm install webpack-dev-server --save-dev注意：虽然你可以全局安装webpack-dev-server，但我们建议在本地安装它
使用
官方推荐两种主流的使用方式
CLI
最简单的办法就是通过webpack CLI，在webpack.config.js文件目录下执行：
$ npx webpack serve注意： 1、你需要预装
npx确保你以上命令执行新成果，关于npx介绍请参考此篇文章 2、请注意你的webpack版本，v5版本才支持webpack serve
NPM Scripts
NPM package.json脚本是一种方便且有效的方法，可以运行本地安装的二进制文件，而不必担心它们的完整目录。示例如下：
{
"scripts": {
"serve": "webpack serve"
}
}定义好脚本后在控制台或终端运行：
$ npm run serveNPM会自动为你引用node_modules中的二进制文件，并执行文件或命令。
结果
这两种方法都将启动一个服务器实例并开始在端口 8080 上侦听来自localhost的连接
webpack-dev-server默认配置为支持在服务器运行时编辑代码时实时重新加载文件
常用配置
以下只介绍工作中的常用配置，有关更多用例和选项，请参阅官方文档
端口配置
1、webpack配置项配置
module.exports = {
//...
devServer: {
port: 8080,
},
};2、CLI命令启动配置
$ npx webpack serve --port 8080自动刷新
webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。
在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载；在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面。
1、iframe模式
使用iframe模式无需额外的配置，只需在浏览器输入：http://localhost:8080/webpack-dev-server/index.html
2、CLI命令启动配置
webpack-dev-server --inline反向代理
与Nginx类似，webpack-dev-server也是通过url正则匹配的方式进行url代理配置，常用配置参考如下：
// webpack.config.js
module.exports = {
// ...
devServer: {
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: 'localhost',
port: 8080,
proxy: {
"/api": {
target: 'http://localhsot:5000',
secure: false,
changeOrigin: true,
logLevel: 'debug'
}
}
}
}域名白名单
配置该配置后，只有匹配的host地址才可以访问该服务，常用于开发阶段模拟网络网络防火墙对访问IP进行限制。当该配置项被配置为all时，会跳过host检查，但不建议这样做，因为有DNS攻击的风险
1、webpack配置项配置
module.exports = {
//...
devServer: {
allowedHosts: [
'host.com',
'subdomain.host.com',
'subdomain2.host.com',
'host2.com',
],
},
};2、CLI命令启动配置
$ npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com