关于ES6+React+webpack的环境搭建

关于ES6+React+webpack的环境搭建

1.全局安装webpack

npm install webpack -g

2.安装webpack-dev-server(可选安装)

npm install webpack-dev-server -g这个是创建一个本地服务器，及热部署的轻量开发工具

3.创建项目并初始化项目

npm init一路回车就好了

4.安装依赖文件

npm install webpack webpack-dev-server react react-dom babel-loader babel-core babel-preset-es2015 babel-preset-react这个8个依赖包，如果不使用热部署的话webpack-dev-server可以不需要安装，至于你要使用样式什么的就要自己去安装相对应的loader

5.配置webpack.config.js文件

module.exports = {
    entry:{
        index:'./index.js', 
    },
    output:{
        path:__dirname,
        filename:'[name].build.js',
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,
                exclude:'/node_modules/',
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
            }
        ]
    },
    resolve:{
        extensions:['.js',".css",".jsx"]
    }
}

6.测试webpack.config.js文件配置是否成功

在项目文件下输入webpack是否生成index.build.js文件

7.在package.json文件中配置热部署启动项

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --host localhost --port 3000"
  },

增加配置项

"start": "webpack-dev-server --inline --host localhost --port 3000"```

8、创建一个App.js或者App.jsx的文件代码如下:

import React, {Component} from "react";
export default class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>hello word</div>
        )
    }
}

9.补充说明，如果用es6的语法写React要使用defaultProps和propTypes需要如下操作(es6环境下React这两个是静态属性了)

import React, {Component,defaultProps,PropTypes} from "react";
export default class App extends Component {
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
            </div>
        )
    }
}
App.defaultProps = {
    title : "我是默认值",
}

App.propTypes={
    ary: React.PropTypes.array,
}

10.在index.js中写入口文件

import React,{Component,PropTypes} from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
    <App/>,
    document.getElementById('app')
)

11.在黑窗口中运行npm start就好了，在浏览器中输入localhost:3000就可以启动服务