React 官方有一套脚手架工具，是初学者的最好选择，可以让初学者集中注意力在 React 本身。

本人对脚手架有点儿抵触（可能主要是对未知的恐惧），从开始学习 React 就走了自己搭建开发环境的路线，这里总结下搭建过程，希望能帮助和我一样不愿使用脚手架工具，但又急需一个练习环境的初学者。

文章同步发布在个人博客站点

本节目标

基于 webpack 构建一个最小 React 项目开发环境，以把下面的 React 组件成功渲染在页面上为目标，即显示 Hello React 到页面。

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

export default class HelloReact extends React.Component{
  constructor(props) {
    super(props);
  }

  render(){
    return( <div>Hello React</div>);
  }
}

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

创建项目目录:

mkdir react-demo
cd react-demo

初始化 npm 环境:

npm init  //这里基本一路回车即可；需要你的系统安装有 node。我安装的 node: v8.2.1、npm: 5.3.0。

完成后会在项目根目录下生成 package.json 文件:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wewin",
  "license": "ISC"
}

package.json 文件的作用是记录各个软件的依赖关系，类似 Rails 中的 Gemfile

基本依赖安装

React 项目依赖的软件包 react、react-dom 是必须的。因为目标是要构建使用 webpack 打包的开发环境，webpack、webpack-cli 不能少。

npm i react -D
npm i react-dom -D
npm i webpack -D
npm i webpack-cli -D

此时项目结构如下:

react-demo tree -L 1 .
.
├── node_modules  // npm 包的安装目录
├── package-lock.json
└── package.json

1 directory, 2 files

node_modules 是依赖包的安装目录，package-lock.json 是依赖包版本锁定。可以保证多个环境或者多个协作者开发环境中依赖包版本一致性。

此时 package.json 内容如下

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wewin",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8"
  }
}

创建项目基本结构

首先创建 src、build 两个目录

➜  react-demo tree . -L 1
.
├── build  // React 打包的出口, webpack 下默认打包在 dist 目录下，个人习惯放在 build 下
├── node_modules
├── package-lock.json
├── package.json
└── src // 源码文件，后面开发基本在这个目录下完成

在 src 目录下创建 webpack 打包的入口文件

cd src
touch index.js

创建 webpack 配置文件

使用 webpack 打包需要创建一个 webpack 配置文件, webpack4 很多配置项都有了默认值，这里是我自己的一个简单配置。

1、最基本的打包入口、出口的配置 (webpack4 入口、出口有默认配置)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),  // 打包出口，即打包后的文件会放在这个目录下
    filename: '[name].[hash:8].js'   // 打包后的文件名
    publicPath: './', 	// 静态资源相对路径
  }
};

2、使用 html-webpack-plugin 插件自动生成文件 html 文件，并插入 <script> 标签的特性。 [html-webpack-plugin] (https://github.com/jantimon/html-webpack-plugin#options) 插件很智能，可以根据你的配置生成你想要的 html。

安装和配置这个插件：

npm i html-webpack-plugin -D

webpack.config.js：

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name][hash:8].js',
    publicPath: './',
  },
  plugins: [new HtmlWebpackPlugin({
	filename: 'index.html',   // 指定生成的文件名，默认就是 index.html
    	template: 'src/index.html'  // 指定 html 生成使用用的模版文件，我指定 使用 ```src/index.html``` 作为模版文件
  })]
};

模版文件 src/index.html，内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

第一个 React 应用。

就是开头提到的在页面上显示 'Hello React' 的小应用。

src/index.js:

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

export default class HelloReact extends React.Component{
  constructor(props) {
    super(props);
  }

  render(){
    return( <div>Hello React</div>);
  }
}

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

编译 React 应用

./node_modules/.bin/webpack

报错如下：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

这是需要加 'mode' 参数，加参数后运行：

./node_modules/.bin/webpack --mode=development

报错：

ERROR in ./src/index.js 1:18
Module parse failed: Unexpected token (1:18)
You may need an appropriate loader to handle this file type.
> import React from react;
| import ReactDOM from react-dom;

这是因为 react 使用的 es6 语法需要使用: babel-loader 来翻译 es6 及最新的 js 语法

安装 babel loader

npm i "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env -D

webpack.config.js 配置：

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].[hash:8].js',
    publicPath: './',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        },
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()]
};

在项目根目录下创建 babel 的配置文件 .babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

./node_modules/.bin/webpack --mode=development

继续报错：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/wewin/reactLearn/react-demo/src/index.js: Unexpected token (10:12)

   8 |
   9 |   render(){
> 10 |     return( <div>Hello React</div>);
     |             ^
  11 |   }
  12 | }
  13 |

这是因为 babel 需要配置 react preset 来支持 react 语法解析。

安装 @babel/preset-react ：

npm i @babel/preset-react -D

修改 babel 配置文件 .babelrc：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    "@babel/preset-react"
  ]
}

再次编译

./node_modules/.bin/webpack --mode=development

congratulations! 成功编译：

Hash: e09b122cfb00f2a585f8
Version: webpack 4.12.2
Time: 898ms
Built at: 2018-06-29 08:19:29
           Asset       Size  Chunks             Chunk Names
main.e09b122c.js    713 KiB    main  [emitted]  main
      index.html  200 bytes          [emitted]
[./src/index.js] 648 bytes {main} [built]
    + 21 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 337 bytes {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

编译成功后在 build 目录下生成了 index.html 和打包后的 js 文件 main.e09b122c.js，index 文件就是 html-webpack-plugin 插件生成的，会自动插入生成的 js 文件。

build/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="./main.e09b122c.js"></script>
  </body>
</html>

用浏览器打开 build/index.html 文件，就可以看到 Hello React 正常输出。

总结

本篇主要目的是总结如何搭建一个最小 React 项目的开发环境，适合抵触脚手架工具，但是又需要一个 React 练习环境的初学者。对 webpack 及相关插件的相关东西基本一笔就带过了。这个作为开发还不够智能，如不能热加载，每次对代码有修改就要重新编译，重新刷新页面，简直毫无开发体验可言，这些，请参考第二篇： webpack 快速构建 React 学习环境（2）-- 热更新