上篇文章中提到过webpack-dev-server ，webpack-dev-server 为我们提供了一个开发时的本地web服务器，这可以解决浏览器同源限制，使得我们可以通过http协议访问资源。更重要的是webpack-dev-server 可以在webpack.config.js 配置文件中进行配置，例如配置https、http2、代理等。

提示

1. 如果你在使用webpack-dev-server中遇到问题，可以访问*/webpack-dev-server*路由来查看所有可访问的静态资源。
2. 当启动本地服务的时候 HTML 模板是必须提供的，通常是index.html，并且需要手动注入打包后的文件。

常用的devServer配置及作用

import { join, dirname } from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

console.log(__dirname);

const config = {
	mode: "development",
	entry: "./index.js",
	devServer: {
		compress: true, // 启动gzip压缩
		host: "0.0.0.0", // 指定host
		port: 3000, // 端口号，默认8080，
		http2: true,
		https: true,
		// 配置http/https/http2
		server: {
			type: "https",
			options: {},
		},
		headers: {
			"X-Custom-Foo": "bar", // 为所有响应添加响应头
		},
		hot: true, // 启动热更新，默认是启动的
		open: true, // 服务器启动时自动打开浏览器，默认是启动的
		// 代理，解决开发环境下的跨域问题
		proxy: {
			"/api": {
				target: "<https://xxx.com:8080>", // 代理到哪
				pathRewrite: { "^/api": "" }, // 路径重写
				changeOrigin: true, // 覆盖原来的origin请求头字段
			},
		},
		// 静态资源选项
		static: {
			directory: join(__dirname, "public"), // 静态资源目录，index.html放到此目录下,默认是public
			publicPath: "/", // 访问静态资源的路由
			// 监听的文件，文件更改会触发页面刷新
			watch: {
				ignored: "*.txt",
			},
		},
	},
};

export default config;