关于webpack的output和devServer的配置

最近利用webpack搭建一个开发环境，实现本地服务器的开启。
遇到的问题：

webpack 打包编译出来的文件，打开可以看到效果。但是开启webpack-dev-server之后找不到文件。

首先要明白几个概念

output: {
	//path webpack打包资源生成的位置。
	path： path.resolve(__dirname, 'dist')
	//publicPath 打包生成的index.html文件里面引用资源的前缀。
	publicPath: '/asset/'
	// <link href="/asset/index.css" rel="stylesheet">
	// <script src="/asset/index.js"></script>
},
devServer: {
	//devServer服务器通过HTTP服务暴露文件。
	//contentBase只能用来配置暴露本地文佳的规则，可以通过设置false来关闭本地文件暴露。
	contentBase: './dist/',
	publicPath: '/'
	//开启webpack-dev-server服务之后，会打开http://loaclhost:8080，如果编译之后的index.html文件在根目录下，那么可以直接打开网页，但是很多时候，我们会把网页放到page文件夹下，那么怎么配置这个选项呢？
	
}

plugins: [
		new HTMLWebpackPlugin({
			template: './src/index.html',
			//生成的文件名称 page文件夹下的index.html 最终生成dist/page/index.html
			filename: 'page/index.html',
		})
	]

这里可以看到，我的index.html文件生成在page文件夹下，而总的路径在/asset/下，所以index.html的路径就是/asset/page/index.html

如果我开启webpack-dev-server服务，怎么打开这个index.html呢？
可以输入网址： http://localhost:8080/asset/page/
这样就能自动打开index.html文件了
你也可以通过http://localhost:8080/webpack-dev-server查看生成的缓存文件位置，找到index.html文件打开，就能在地址栏看到完整的地址了。

如果找不到网页的时候，你想返回can not get /xxx 而不是让人看到你的目录结构，你可以把contentBase设置为false