webpack4系列笔记之（6）简单配置开发服务器 devServer

一、什么是devServer?

devServer 是一个本地开发服务器,会自动监听变化,自动打包构建,自动更新刷新浏览器
特点:

• 不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器
• 减少磁盘的读取，提高构建效率

二、devServer安装及简单配置

1、安装devServer

npm i webpack-dev-server -D

2、devServer简单配置

const path = require('path');
const webpack = require('webpack');

module.exports = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	entry: {
		main: './src/index.js'
	},
	devServer: {
		contentBase: './dist',  // 对外提供访问内容路径
		open: true,  // 默认打开浏览器
		port: 8080, // 配置端口
		compress: true, // 配置是否开启 gzip 压缩
		hot: true, // 开启热更新HMR，只能更新css；js和图片需要手动更新
		hotOnly: true,  // 启用HMR，当编译失败时，不刷新页面
		// 服务器代理，解决开发环境跨域问题
		proxy: {
			'/api': {
					target: 'http:// localhost:3000',  // 代理地址
					changeOrigin : true // 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值。
					pathRewrite:{
							'^/api': ''
						}
				}	
		},
		// 在编译过程中有任何错误，可以显示在网页上,在浏览器上全屏显示编译的errors或warnings。默认是关闭的
		overlay: {
				warnings: false,
				error: true
			},
		header: {
			"token": 'fghjkl'
		}
	},
	module: {
	},
	plugins:[
			new webpack.HotModuleReplacementPlugin()  // HMR 特性所需要的插件
		],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}