3、webpack调试及开发环境的基本配置

okk，第三部分调试及开发环境的基本配置

需求：每次更改完都要重新刷新，有没有自动刷新，用过React和Vue的朋友们都知道，自己可以自己刷新，那webpack怎么配置呢

---

调试环境——那就是devServer

devServer运行下所编译的文件皆存在于内存中，不会改变本地文件，不会有任何输出。启动指令：npx webpack-dev-server

module.exports = {
	entry:'',
	output:'',
	module:{},
	plugins:[],
	mode:'',
	//devServer:用来自动化（自动编译，自动打开服务器，自动刷新）
	devServer:{
		// (项目构建后路径)告诉本地服务从哪里提供内容
		contentBase: resolve(__dirname,'build')
		// 启动gzip压缩
		compress: true,
		// 端口号
		port: 3000,
		// 自动打开浏览器
		open: true
	}
}

---

开发环境

这时候就没有要加到啥配置项了，主要是把输出的文件分分类，图片到图片目录下边，js到js目录下边，其他资源在放在一个目录下边。然后把mode换成开发者的模式⬇️

module.exports = {
	entry:'',
	output:{
		// 输出到js目录下
		filename:"js/****.js",
		path:resolve(__dirname,'****'),
	},
	module:{
		{
			test: /\.(jpg|png|gif)$/,
			loader:'url-loader',
			options: {
				limit: 8*1024,
				esModule:false,
				name:'[hash:n].[ext]',
				// 图片资源打包到输出到imgs目录下
				outputPath: 'imgs'
			}
		},
		{
			exclude: /\.(css|js|html|less)$/,
			loader:'file-loader',
			options: {
				name:'[hash:n].[ext]',
				// 其他资源打包到输出到该路径下
				outputPath: 'media'
			}
		}
	},
	plugins:[],
	// 生产模式
	mode:'production',
	//devServer:用来自动化（自动编译，自动打开服务器，自动刷新）
	devServer:{
		contentBase: resolve(__dirname,'build')
		compress: true,
		port: 3000,
		open: true
	}
}