从零开始配置React应用开发环境

使用create-react-app创建的React应用开发环境给了我们便利的同时也给我们很大的限制，最好的方式还是按照自己意愿去组合构建开发环境，形成一套适合自己或自己团队的可定制环境。

在开始环境搭建之前得安装Node,Git等基础软件工具。创建工程目录，并用npm init -y初始化package.json文件。

mkdir learn-react
cd learn-react
npm init -y

安装webpack,webpack-dev-server,babel-core,babel-loader,babel-preset-env,babel-preset-react,html-webpack-plugin,clean-webpack-plugin等工具包和react, react-dom, prop-types等项目依赖包。编写打包配置文件webpack.config.js,并在package.json中增加运行命令。
注意:其中webpack,babel-core,babel-preset,babel-preset-react,babel-loader是必须的，其他的可选。

npm install --save-dev webpack webpack-dev-server  babel-core babel-loader babel-preset-env babel-preset-react  html-webpack-plugin clean-webpack-plugin 
npm install --save react react-dom prop-types

打包配置文件webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板文件引用插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //删除目录插件

module.exports = {
    resolve: {
        extensions:  ['.js','.jsx'] //解析文件类型
    },
    entry: './src/index.js', //打包入口
    //模块解析规则
    module: {
        rules: [
            {
                test: /\.jsx?$/, // 解析文件类型
                exclude: /node_modules/, //排除文件夹或文件
                use: {
                    loader: "babel-loader", //解析插件
                    options: {
                        presets: ["env", "react"] //解析规则集，env对应babel-preset-env,主要用于JavaScript新特性适配,react对应babel-preset-react,主要用于jsx语法的解析                  
                    }
                }
            }
        ]
    }, 
    devtool: 'inline-source-map', // 报错代码追踪
    devServer: {
        contentBase: './dist' //服务启动基础目录
    },
    plugins: [
        new CleanWebpackPlugin(['dist']), //删除dist目录
        new HtmlWebpackPlugin({
            title: 'Development', //页签名
            template: 'template/index.html', // 模板文件
            inject: 'body' // 生成文件自动插入方式
        })
    ],
    output: {
        filename: "[name]-bundle.js", //生成文件名
        path: path.resolve(__dirname, 'dist') //生成文件存放目录
    }
};

项目依赖文件package.json

"description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack",
  },
  "keywords": [
    "react"
  ],
  "author": "Dreamer King",
  "license": "MIT",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
     "prop-types": "^15.5.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

其中，start命令以npm start运行启动开发环境，而build命令是打包，以npm run build运行。
到此，基础的开发环境配置完毕，可以编写代码啦！
附项目的目录结构如下：

项目目录结构