使用 webpack 4 和 Babel 构建 React 应用(2018)

• 1.安装和配置 webpack

  2.Babel的安装与配置

  Babel其实是一个编译JavaScript的平台，Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。
  Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-env包和解析JSX的babel-preset-react包）。

• babel-loader是webpack加载器，负责接收最新的JavaScript代码（ES6，ES7…）代码并使其可以被当前使用的浏览器完全支持。
• 安装并配置babel-preset-env用于将JavaScript ES6代码编译为ES5
• 安装并配置babel-preset-react用于将JSX和其他东西编译到JavaScript

1.安装依赖包

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-loader babel-core babel-preset-env babel-preset-react

2.配置Babel，创建文件.babelrc

Babel其实可以完全在 webpack.config.js 中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。
webpack会自动调用.babelrc里的babel配置选项。

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

3.配置webpack.config.js

module.exports = {
 module: {
    rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
  }
}

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了

3.编写 React 组件

1. 安装 React 和 React-DOM

npm install --save react react-dom

1. 使用ES6语法创建react组件

//Greeter,js
import React, {Component} from 'react'
import config from './config.json';

class Greeter extends Component{
  render() {
    return (
      <div>
        {config.greetText}
      </div>
    );
  }
}
export default Greeter

1. 使用ES6的模块定义和渲染Greeter模块

// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));