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

####webpack 学习笔记

1、安装

npm i webpack -g //全局安装

扩展支持：

//React
npm i react --save-dev 
npm i react-dom --save-dev

//Babel
npm i babel-core --save-dev
npm i babel-loader --save-dev
npm i babel-preset-react --save-dev //编译JSX
npm 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"