从零搭建前端开发环境（一）——React篇：1.引入webpack并跑起来

由于有前文的铺垫，我们这里不多废话，直接进入webpack的配置部分，让项目能够跑起来。先声明下，这篇文章会以从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置最后的项目结构为基础，即已经完成了基本项目的webpack配置。这时你就会发现之前花费的精力是值得的，有了好的基础，一切都是那么的自然而然，记住一句话：“慢慢来比较快”。

1、安装

$ npm i -S react react-dom

在从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置安装的模块基础上再安装几个

$ npm i -D babel-preset-react

2、修改配置

修改webpack.base.js

// code
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
//code
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      'src': path.resolve(root, 'src'),
      'util': path.resolve(root, 'src/util'),
      'assets': path.resolve(root, 'src/assets'),
      'components': path.resolve(root, 'src/components')
    },
  },
//code

修改.babelrc

{    
  "presets": [    
    ["env",{ "modules": false }],    
    "stage-2",
    "react"
  ]
}   

3、修改代码

新建src/components/HelloWorld/index.jsx

import React from 'react';
import { strReverse } from '@util';
import logo from '@assets/logo.jpg';

const STR_INPUT = 'Hello World';
const STR_HOLDER = 'The result will be here...';

export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: STR_HOLDER
    }
  }

  onChangeResult(result) {
    this.setState({
      result
    });
  }

  render() {
    return <div>
      <img src={logo} alt="logo" />
      <h1>{STR_INPUT}</h1>
      <button onClick={() => this.onChangeResult(strReverse(STR_INPUT))}>Show the reverse of "{STR_INPUT}"</button>
      <button onClick={() => this.onChangeResult(STR_HOLDER)}>Do reset</button>
      <p>{this.state.result}</p>
    </div>
  }
}

修改src/index.js为src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import HelloWorld from '@components/HelloWorld';

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('app')
);

运行prod和dev试试，是不是也没那么难～除了业务代码之外，项目的配置简直简单到爆，有木有～