使用create-react-app創(chuàng)建的React應(yīng)用開發(fā)環(huán)境給了我們便利的同時也給我們很大的限制，最好的方式還是按照自己意愿去組合構(gòu)建開發(fā)環(huán)境，形成一套適合自己或自己團隊的可定制環(huán)境。

在開始環(huán)境搭建之前得安裝Node,Git等基礎(chǔ)軟件工具。創(chuàng)建工程目錄，并用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', //打包入口
    //模塊解析規(guī)則
    module: {
        rules: [
            {
                test: /\.jsx?$/, // 解析文件類型
                exclude: /node_modules/, //排除文件夾或文件
                use: {
                    loader: "babel-loader", //解析插件
                    options: {
                        presets: ["env", "react"] //解析規(guī)則集，env對應(yīng)babel-preset-env,主要用于JavaScript新特性適配,react對應(yīng)babel-preset-react,主要用于jsx語法的解析                  
                    }
                }
            }
        ]
    }, 
    devtool: 'inline-source-map', // 報錯代碼追蹤
    devServer: {
        contentBase: './dist' //服務(wù)啟動基礎(chǔ)目錄
    },
    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運行啟動開發(fā)環(huán)境，而build命令是打包，以npm run build運行。
到此，基礎(chǔ)的開發(fā)環(huán)境配置完畢，可以編寫代碼啦！
附項目的目錄結(jié)構(gòu)如下：

項目目錄結(jié)構(gòu)