6.16 devServer接口文件转发，解决单页面路由跳转，match和test，组件绑定原生事件.native，eslint安装以及es与webpack结合，resolve配置

1、devServer接口文件转发

情景：当后端未写好header.json接口，让你先访问demo.json时。

// webpack.config.js的devServer中
		proxy: {
			'/react/api': {
				target: 'http://www.dell-lee.com/',
				pathRewrite: {
					'header.json': 'demo.json'
				}
			}
		}
// axios代码
	axios.get('/react/api/header.json') // 会被转发请求demo.json

待接口开发写完毕，你再修改webpack.config.js就行了。
注：内容较简单，深入请看文档。

2、单页面应用的路由跳转，开发环境下需要配置。
如果未做devServer的配置，路由的跳转是找不到对应html文件的。其实我们要做的是一个html入口多个路由。开启historyApiFallback即可。

  // 前端的一般配置（true够用）
	devServer: {
		/**/
		historyApiFallback: true
		/**/
	}
	
  // 也可以具体配置
  devServer: {
	historyApiFallback: {
		rewrites: [{
			from: /abc.html/,
			to: '/index.html'
		}]
	},
}

注：以上为开发环境配置，若上线依旧路由跳转失败，则需告知后端让后端进行nginx或apache配置

3、match和test 都是正则相关的的api
var reg = /^sh(ou)er$/

reg.test(‘shouer’) // 返回布尔值 true
(‘shouer’).match(reg) // 返回对象

4、组件绑定原生事件

将原生事件绑定到组件 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

同样 @click.native=""也可以给组件绑定原生事件

5.1、eslint安装，校验react
cnpm i eslint -D
然后根据npx eslint --init 生成默认配置文件 参数选择react
之后要按提示安装四个react语法eslint检测插件

红框部分是按需配置的选项。采用babel-eslint解析器，airbnb规范规则，不覆盖全局document

5.2 eslint与webpack结合

cnpm install eslint-loader --save-dev

直接运行 npm run start (即npx webpack-dev-server)

在开发模式下，它会自动执行eslint-loader，并抛出错误代码位置。

如果要想更直观的提示错误位置。 需配置overlay: true

6、resolve 配置
import 自动匹配后缀名

resolve: {
	extensions: ['.js', '.jsx'] // 先找js  再找jsx
}

// index.js中
import Child from './child/child' // 正确引入child.jsx

并不是所有后缀都适合自动匹配。显示的文件比如jpg就不适合，反而会加大复杂度。
一些隐式的比如逻辑文件比如js ,jsx 就适合使用。

如果你想自动定位文件夹下的某一文件 （默认：index.[ext]文件会自动匹配）

resolve: {
	extensions: ['.js', '.jsx'],
	mainFiles: ['index', 'child'] // +
}

// index.js中
import Child from './child/' //正确引入 child.jsx

对引入的模块进行别名配置 (比如 import abc from ‘shouer’)

resolve: {
	extensions: ['.js', '.jsx'],
	alias: {
		'shouer': path.resolve(__dirname, '../src/child') // +
	}
}
// index.js中
import Child from 'shouer' //正确引入 child.jsx