react實(shí)時(shí)熱更新開(kāi)發(fā)環(huán)境搭建

princekin 發(fā)布于2019-08-29 12:32 / 3771人閱讀

摘要：搭建一個(gè)實(shí)時(shí)熱更新開(kāi)發(fā)環(huán)境，當(dāng)代碼變更時(shí)，可以不用重新啟動(dòng)打包文件，這樣會(huì)很大地提高我們的開(kāi)發(fā)效率。完成開(kāi)發(fā)環(huán)境搭建。

搭建一個(gè)react實(shí)時(shí)熱更新開(kāi)發(fā)環(huán)境，當(dāng)代碼變更時(shí)，可以不用重新啟動(dòng)webpack打包文件，這樣會(huì)很大地提高我們的開(kāi)發(fā)效率。

使用工具

vscode編輯器，可以實(shí)時(shí)git推送更新自帶git命令行，隨意下載各種語(yǔ)言框架代碼格式化高亮插件

chrome ^58瀏覽器性能穩(wěn)定，方便實(shí)時(shí)調(diào)試bug

node ^7 自帶npm包管理工具和js后臺(tái)運(yùn)行環(huán)境

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

搭建開(kāi)發(fā)環(huán)境

1.創(chuàng)建文件夾，初始化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
用于打包文件和建立一個(gè)實(shí)時(shí)更新的服務(wù)器系統(tǒng),并且可以使用webpack命令行
$ npm i -g webpack webpack-dev-server
4.項(xiàng)目文件夾下面安裝webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react等開(kāi)發(fā)用模塊，babel有關(guān)的用來(lái)轉(zhuǎn)碼es6 和jsx語(yǔ)法

$ 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"
    }
}

文件目錄如下
注意此時(shí)打包后bundle.js文件存在于內(nèi)存中所以在index.html中只能用src="./bundle.js"引用.不能加上相對(duì)路徑文件夾output/!

這樣我們?cè)诿钚休斎?b>webpack-dev-server 打開(kāi)瀏覽器輸入生成的網(wǎng)址，就會(huì)自動(dòng)在更改代碼后，實(shí)時(shí)刷新瀏覽器。完成react開(kāi)發(fā)環(huán)境搭建。其他的自動(dòng)打開(kāi)瀏覽器，分割代碼等功能，可以參考webpack官網(wǎng)指南。