webpack watch dev-server cors

1、watch

webpack 可以监听打包文件变化，当它们修改后会重新编译打包。
watch相关配置：watchOptions：

	module.exports = {
	    watch: true,
	    watchOptions: {
	        aggregateTimeout: 300, // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包
	        poll: 1000, // 每隔多少时间检查一次变动
	        ignored: /node_modules/ // 排除一些巨大的文件夹, 不需要监控的文件夹
		},
	}

2、dev-server

webpack-dev-server和watch一样可以监听文件变化，可以将我们打包好的程序运行在一个服务器环境下，可以解决企业开发中"开发阶段"的跨域问题。
npm install webpack-dev-server --save-dev
webpack.config.js

	module.exports = {
	     // 检查文件变化
	     devServer: {
	       static: {
	         directory: path.join(__dirname, 'public'),
	         },
	       open: true, // 是否自动在浏览器中打开
	       compress: true,
	       port: 9000, // 服务器端口号
	    },
	}

package.json

	  "scripts": {
	    "test": "npx webpack-dev-server --config webpack.config.js"
	  },

3、CORS

利用webpack-dev-server可代理解决跨域问题和重写请求路径。

	module.exports = {
	    /*
	    devServer: 自动检测文件变化配置
	    * */
	    devServer: {
	        contentBase: "./bundle",// 打包后的目录
	        open: true,// 是否自动在浏览器中打开
	        port: 9090,// 服务器端口号
	       proxy: [  //代理
	         {
	           context: ['/user', '/login'], //将多个路径代理到同一个代理地址
	           target: 'http://127.0.0.1:3000', //代理地址
	           changeOrigin: true, //域名跨域
	           secure: false, //https跨域
	           pathRewite: { '': '/api' }, //路径重写，将路径中的api替换为空
	         },
	       ],
		},
	}