webpack2小白速度开始react开发

笔者刚开始接触到webpack的时候是因为这个时候react已经满天飞了，想开始react的开发，虽然很多前端Er都说react上手不难，可是这一套工具链把很多小白都拒之门外，webpack+es6+react这套简单的工作流我也是找了很久，煞费苦心，刚开始有点上手webpack1的时候webpack2出现了，然后我又看了很久文档，现在出一个简易版的Webpack2 + es6 + react的配置工作流给大家，让大家速度开始写上react!
首先如果大家npm安装package太慢的话可以先安装淘宝的cnpm工具

 npm install -g cnpm --registry=https://registry.npm.taobao.org

安装全局的webpack工具

cnpm install -g webpack webpack-dev-server

webpack-dev-server是一个小型的node服务器，下面开始初始化我们的项目

mkdir app && cd app/ && npm init

初始化项目后安装css-loader 以及webpack

cnpm install webpack css-loader --save-dev

安装一下babel的一些工具，目的不用多说，我们的es6、jsx的代码都要靠它来打包

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

当然还有react和react-dom

cnpm install react react-dom --save-dev

这个时候发现package.json的文件中devDependencies出现了下面的信息

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.3",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }

把这些依赖安装结束后我们要开始写我们的webpack.config.js文件了，这个文件是我们在终端输入了webpack后读取的第一个文件，因为笔者也是一个webpack2小白，做了一些比较简单的配置，让大家先用上react,所以大神就可以忽略以该文章了

var path = require('path');

module.exports = {
  entry: './app/main.jsx',
  output: {
        path: path.resolve(__dirname, './app/build'), // 输出文件的保存路径
        filename: 'bundle.js' // 输出文件的名称
    },

    module: {
            loaders: [{
                    test: /\.jsx?$/,
                    loaders: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                },
                {
                    test: /\.css$/,
                    loader: 'style-loader!css-loader'
                },
                
            ]
    }
};

写的比较简单，包括一个入口文件，一个输出文件的地址，我们的入口文件在app文件下的main.jsx,输出文件在app/build下面的 bundle.js文件，下面我们来新建这些文件吧，目录给大家：

image.png

图片比较失真，大概图你要有一个app文件夹，app/build用来存放打包好的文件，一个index.html，一个main.jsx

index.html

main.jsx

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
    render(){
        return(
            
Hello Webpack Hello React
        )
    }
}

ReactDOM.render(
    ,
    document.getElementById('app')
)

好了，在你的文件的根目录输入

webpack

然后用你最喜欢的浏览器（我喜欢chrome）打开index.html吧！

now enjoy react!

please email [email protected]