webpack 学习笔记-webpack+react+es6开发环境搭建

####webpack 学习笔记1、安装npm i webpack -g //全局安装扩展支持：//Reactnpm i react --save-dev npm i react-dom --save

####webpack 学习笔记

1、安装

---

npm i webpack -g //全局安装

扩展支持：

//Reactnpm i react --save-dev npm i react-dom --save-dev//Babelnpm i babel-core --save-devnpm i babel-loader --save-devnpm i babel-preset-react --save-dev //编译JSXnpm i babel-preset-es2015 --savedev //编译ES6

2、配置

---

webpack.config.js

var path = require('path');module.exports = {	//入口文件	entry: path.resolve(__dirname, 'src/main.js'),	//编译后的输出目录、和文件名称、当前配置会打包为一个文件	output: {			path: path.resolve(__dirname, 'dist'),			filename: 'bundle.js'	},	//模块加载器	module: {			loaders: [{  				test: //.js$/,//匹配js文件  				loader: 'babel', //用babel编译  				query: {      				presets: ['es2015', 'react'] //支持es6、react-jsx语法  				}			}]	}};

3、定义组件

---

import React from 'react';export default class FormItem extends React.Component{	constructor(props){    	super(props)	}	render(){		return (			<li>				<label>{this.props.attrName}:</label><input type={this.props.attrType} defaultValue={this.props.attrValue}/>			</li>		)	}}

4 依赖包版本

---

"babel-core": "^6.9.0",    "babel-loader": "^6.2.4",    "babel-preset-es2015": "^6.9.0",    "babel-preset-react": "^6.5.0",    "css": "^2.2.1",    "css-loader": "^0.23.1",    "less": "^2.7.1",    "less-loader": "^2.2.3",    "react": "^15.0.2",    "react-dom": "^15.0.2",    "style-loader": "^0.13.1",    "webpack": "^1.13.0",    "webpack-dev-server": "^1.14.1"