react實時熱更新開發環境搭建

搭建一個react實時熱更新開發環境，當代碼變動時，能夠不用從新啓動webpack打包文件，這樣會很大地提升咱們的開發效率。

使用工具

• vscode編輯器，能夠實時git推送更新自帶git命令行，隨意下載各類語言框架代碼格式化高亮插件

• chrome ^58瀏覽器性能穩定，方便實時調試bug

• node ^7 自帶npm包管理工具和js後臺運行環境

• git bash 命令行工具，方便命令行命令輸入

搭建開發環境

1.建立文件夾，初始化npm配置文件
$ mkdir react-1 && cd react-1 && npm init
2.安裝react react-dom react-router react-router-dom必備的核心模塊
$ npm i --save react react-dom react-router react-router-dom
3.全局安裝webpack webpack-dev-server
用於打包文件和創建一個實時更新的服務器系統,而且能夠使用webpack命令行
$ npm i -g webpack webpack-dev-server
4.項目文件夾下面安裝webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react等開發用模塊，babel有關的用來轉碼es6 和jsx語法

$ npm install --save-dev  webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react

5.配置webpack.congfig.js文件指定好加載器和入口文件路徑打包後的文件路徑文件名。

//webpack.config.js
var webpack = require('webpack')
var path = require('path')
module.exports = {
    context: __dirname + '/src',
    entry: "./js/index.js",
    devServer: {
        inline: true
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {
        path: __dirname + '/output/',
        filename: 'bundle.js'
    }
}

文件目錄以下
注意此時打包後bundle.js文件存在於內存中因此在index.html中只能用src="./bundle.js"引用.不能加上相對路徑文件夾output/!

---

這樣咱們在命令行輸入webpack-dev-server 打開瀏覽器輸入生成的網址，就會自動在更改代碼後，實時刷新瀏覽器。完成react開發環境搭建。其餘的自動打開瀏覽器，分割代碼等功能，能夠參考webpack官網指南。