利用webpack搭建React开发环境

NO.1 新建react项目，进入项目目录

npm init
然后一键安装需要的npm包

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

注：其中react-hot-loader为react模块热替换的功能

NO.2 安装react和react-dom

npm install react react-dom --save-d

NO.3 配置webpack.config.js

新建webpack.config.js配置文件

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: 'react-hot!babel'},
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}`

在处理js的时候，需要把react-hot这个东西加载进去,exclude: /node_modules/为需要忽略处理的模块

然后创建修改.babelrc文件，配置babel

{
  "presets": ["es2015", "react"]
}

加入react预设

NO.4

新建entry.js文件
导入react和react-dom

'use strict';
import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';

ReactDom.render(
  <Name />,
  document.getElementById('app')
  );

意思是把Name这个组件放入到app这个div中

NO.5 编写一个测试组件

新建一个name.js

'use strict';

import React from "react";

class Name extends React.Component {
render () {
  return (
    <div>
      hello~ <input />
    </div>
    );
  }
}

export { Name as default };

NO.6 在package.json配置快捷启动命令

在script选择中加入：

"watch": "webpack-dev-server --inline --hot"

NO.7 环境搭建完毕

在项目目录中，运行npm run watch

项目成功的跑起来，环境搭建完毕