最小白的webpack+react環(huán)境搭建

番茄西紅柿發(fā)布于2019-04-23 13:28 / 2678人閱讀

摘要：接下來(lái)安裝和，執(zhí)行命令安裝很順利，沒(méi)有遇到任何問(wèn)題。再總結(jié)一下我們遇到的坑初始化時(shí)的項(xiàng)目名稱(chēng)要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會(huì)大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容

本文也同步發(fā)表在我的公眾號(hào)“我的天空”

從零開(kāi)始，用最少的配置、最少的代碼、最少的依賴(lài)來(lái)搭建一個(gè)最簡(jiǎn)單的webpack+react環(huán)境。

最近在玩webpack+react+移動(dòng)端，那么第一步自然是搭建相關(guān)的環(huán)境，本來(lái)網(wǎng)上的教程很不錯(cuò)，只是前端相關(guān)的東西發(fā)展太過(guò)迅猛，只相隔了半年有些東西的版本就不對(duì)了，有些配置、命令等照著之前的教程做就可能會(huì)掉到坑里去，別問(wèn)我怎么知道的，我剛剛從坑里爬出來(lái)，因此趕緊寫(xiě)篇文章來(lái)記錄一下，也算是讓自己再鞏固一下。

本篇完全是從零開(kāi)始，用最少的配置、最少的代碼、最少的依賴(lài)來(lái)搭建一個(gè)最簡(jiǎn)單的webpack+react環(huán)境。會(huì)把一個(gè)小白的經(jīng)歷原原本本的寫(xiě)出來(lái)，遇到的坑都用紅色的坑字標(biāo)注出來(lái)，由于我也是第一次學(xué)習(xí)相關(guān)的知識(shí)點(diǎn)如果有不正確的地方也多多歡迎大家來(lái)指出。

本篇文章寫(xiě)作的日期是2018-7-21，因此所有依賴(lài)的版本到當(dāng)前日期為止，以后如果有升級(jí)變化的話，那也是無(wú)法當(dāng)前預(yù)料得到的。我的操作系統(tǒng)是win7，因此不涉及到linux的相關(guān)知識(shí)點(diǎn)。編輯器是Sublime Text3.0，順便安利一下Sublime Text，好用速度又快，真心不錯(cuò)！

我是參考這篇教程：https://segmentfault.com/a/1190000006178770

現(xiàn)在讓我們開(kāi)始吧，第一步我們先配置一個(gè)webpack的web服務(wù)器。

webpack依賴(lài)于node.js，那么第一步是安裝node.js，這個(gè)沒(méi)什么好說(shuō)的，windows環(huán)境的安裝就更友好了，官網(wǎng)下載安裝包，一路默認(rèn)安裝即可，現(xiàn)在的node.js安裝完畢后，npm也就自帶安裝好了，后面我們就要一路與npm打交道了。

首先我們要用npm初始化項(xiàng)目，電腦上新建一個(gè)目錄保存我們的練習(xí)文件，隨后進(jìn)入cmd命令行，轉(zhuǎn)到該目錄下。如果命令行不會(huì)操作的話，請(qǐng)先掌握cd這個(gè)命令。接下來(lái)在該目錄下輸入npm init命令：

npm init

根據(jù)提示一路回車(chē)就可以了，不過(guò)這個(gè)地方可能會(huì)有一個(gè)坑存在，如圖：

這里報(bào)錯(cuò)：Sorry，name can only contain URL-friendly characters。

該錯(cuò)誤產(chǎn)生的原因是npm初始化時(shí)，會(huì)向我們?cè)儐?wèn)項(xiàng)目名，如果我們不指定的話（通常都是如此），那么就會(huì)用當(dāng)前文件夾來(lái)命名，而我們的文件夾的名稱(chēng)為“練習(xí)-react環(huán)境”，其包含了一個(gè)中劃線（-），因此導(dǎo)致命名錯(cuò)誤了。那么我們只要輸入一個(gè)項(xiàng)目名稱(chēng)（譬如test）就可以了，或者干脆把文件夾重命名為符合規(guī)范的名稱(chēng)就可以了。

本例中我們手動(dòng)輸入了test，將項(xiàng)目名稱(chēng)指定為test：

接下來(lái)就一路回車(chē)，最后詢(xún)問(wèn)“Is this OK？”時(shí)輸入y后回車(chē)，完成npm初始化。

npm初始化后，在文件夾下將會(huì)出現(xiàn)一個(gè)node_modules文件夾（目前為空），以及pack.json文件。其實(shí)我們剛才npm init命令就是為了配置這個(gè)package.json，因此也可以完全自己來(lái)手動(dòng)創(chuàng)建。

接下來(lái)安裝webpack和webpack-dev-server，執(zhí)行命令：

npm install webpack webpack-dev-server --save-dev

安裝webpack很順利，沒(méi)有遇到任何問(wèn)題。

安裝完畢后，node_modules文件夾中就不再為空了，里面存放的都是webpack的相關(guān)依賴(lài)。package.json中也多了"dependencies"和"devDependencies"兩項(xiàng)，其記錄的是當(dāng)前依賴(lài)及版本信息，其中"dependencies"為空。

"devDependencies": {
    "webpack": "^4.16.1",
    "webpack-dev-server": "^3.1.4"
},
"dependencies": {
}

隨后在當(dāng)前文件夾下新建一個(gè)public文件夾（文件夾名任意），在里面寫(xiě)一個(gè)index.html頁(yè)面，內(nèi)容隨意。接下來(lái)我們就要配置webpack了，在文件夾下新建一個(gè)webpack.config.js文件，此時(shí)目錄結(jié)構(gòu)為：

編輯webpack.config.js，由于我們的目的是創(chuàng)建一個(gè)web服務(wù)器，因此只需要配置以下內(nèi)容：

module.exports={
    devServer:{
        contentBase:"./public"
    }
}

devServer是webpack中web服務(wù)器的相關(guān)配置項(xiàng)，contentBase指定的是頁(yè)面加載目錄，而其加載頁(yè)面默認(rèn)為index.html，由于我們的index.html是在public目錄下，因此就將contentBase設(shè)置為"./public“。

接下來(lái)在package.json中配置web服務(wù)啟動(dòng)命令，該命令配置在scripts中的，其命令名稱(chēng)為“server”，命令詳情為“webpack-dev-sever --open”：

"server":"webpack-dev-server --open"

將其插入scripts中：

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "server": "webpack-dev-server --open"
},

在命令行中輸入"npm run server”回車(chē)以便啟動(dòng)web服務(wù)，此時(shí)會(huì)遇到一個(gè)坑，webpack并沒(méi)有啟動(dòng)web服務(wù)，而是報(bào)錯(cuò)：

其大意是缺少webpack-cli，那么我們自然就安裝這個(gè)webpack-cli，執(zhí)行命令：

npm install webpack-cli --save-dev

webpack-cli安裝過(guò)程很順利，隨后再執(zhí)行“npm run server”就可以正常啟動(dòng)web服務(wù)了，并且啟動(dòng)默認(rèn)瀏覽器，顯示public下的Index.html頁(yè)面，web服務(wù)的默認(rèn)端口是8080。

至此，我們第一部分的目的：?jiǎn)?dòng)一個(gè)web服務(wù)便完成了，總結(jié)一下，要從零開(kāi)始啟動(dòng)webpack的web服務(wù)需要做：

安裝node.js、npm
安裝webpack、webpack-cli、webpack-server-dev
npm初始化
編寫(xiě)一個(gè)顯示頁(yè)面并命名為index.html
創(chuàng)建webpack.config.js，并配置devServer信息。
配置package.json，設(shè)置web啟動(dòng)命令。

到目前為止，我們絲毫未提及另一位主角：react，接下來(lái)我們就繼續(xù)搭建環(huán)境，讓其支持react。首先自然是要安裝react，我們需要安裝react和react-dom，執(zhí)行命令：

npm install react react-dom --save

由于react是在正式環(huán)境中也需要的，因此npm安裝時(shí)沒(méi)有帶-dev參數(shù)。

接下來(lái)修改之前的index.html，不管以前是怎么編寫(xiě)的，請(qǐng)?jiān)贖TML中增加一個(gè)

，將其的ID設(shè)置為"boot“，同時(shí)編寫(xiě)外部js引入，引入的js名為bundle.js。

<body>
    <div id=root>div>
    <script  src=bundle.js>script>
body>

接下來(lái)在public目錄下創(chuàng)建index.jsx文件，注意后綴名是jsx，其內(nèi)容為：

import React from react
import { render } from react-dom

class Hello extends React.Component {
    render() {
       return (
           hello react！
        )
    }
}
render(
    ,
    document.getElementById(root)
)

react的語(yǔ)法細(xì)節(jié)我們暫時(shí)不關(guān)心，只要知道最后頁(yè)面上會(huì)輸出hello react！就可以了。

jsx是react的專(zhuān)用語(yǔ)法，HTML是無(wú)法引用的，因此我們需要將其轉(zhuǎn)換為HTML能夠識(shí)別的JS，而這個(gè)正是webpack大顯身手的時(shí)候，我們開(kāi)始來(lái)配置webpack，配置之前，再確認(rèn)一下的當(dāng)前的目錄結(jié)構(gòu)：

首先我們是通過(guò)babel來(lái)轉(zhuǎn)換jsx的，因此需要安裝babel相關(guān)的環(huán)境，我們需要安裝：

babel-core
babel-loader
babel-preset-es2015
babel-preset-react

執(zhí)行命令：

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

由于我們要轉(zhuǎn)換的源文件是index.jsx，轉(zhuǎn)換后的目標(biāo)文件是bundle.js，因此需要在webpack中配置入口和出口，在文本webpack.config.js中增加以下內(nèi)容：

entry:__dirname+"/public/index.jsx",
output:{
     path:__dirname+"/public",
     filename:bundle.js
}

entry是轉(zhuǎn)換的入口，而output是轉(zhuǎn)換的出口。

同時(shí)還要在webpack.config.js中配置loader，讓其通過(guò)外部工具來(lái)處理文件，而我們當(dāng)前要處理的是通過(guò)babel來(lái)處理jsx文件。因此到了這一步我們大致會(huì)有些明白了，并不是webpack本身幫我們處理這些，而是像個(gè)中介一樣，把要處理的部分與相關(guān)的工具聯(lián)系在一起。

我們?cè)趙ebpack.config.js中加入：

module: {
    loaders: [
        { test: /.(jsx)$/, exclude: /node_modules/, loader: babel }
    ]    
}

其表明jsx文件需要用babel來(lái)處理，但是對(duì)于node_modules文件夾中的文件忽略掉（exclude設(shè)置）。此時(shí)webpack.config.js的內(nèi)容就是：

module.exports={
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:bundle.js
    },
    devServer:{
        contentBase:"./public"
    },
    module: {
        loaders: [
            { test: /.(js|jsx)$/, exclude: /node_modules/, loader: babel }
        ]
    }
};

照理來(lái)說(shuō)，到了這一步所有該做的事情都已經(jīng)做完了，通過(guò)babel將index.jsx解析成bundle.js，Web服務(wù)將啟動(dòng)index.html，而index.html會(huì)引入bundle.js，最后在頁(yè)面上顯示hello react！

但是，事情往往不是那么順利的，接下里要繼續(xù)踩坑！首先我們先執(zhí)行npm run server看看是什么情況：

馬上就遇到坑，刺眼的紅色錯(cuò)誤提示，意思居然是loaders屬性無(wú)效？！問(wèn)題出現(xiàn)在webpack版本上，我們安裝的版本是4.16.1，此時(shí)webpack.config.js中l(wèi)oaders的寫(xiě)法已經(jīng)過(guò)時(shí)，應(yīng)該用rules，同時(shí)babel也應(yīng)該用babel-loader來(lái)替代，實(shí)際的寫(xiě)法為：

module: {
   rules: [
        { test: /.(jsx)$/, exclude: /node_modules/, loader: babel-loader }
    ]    
}

此時(shí)webpack.config.js的內(nèi)容為：

module.exports={
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:bundle.js
    },
    devServer:{
        contentBase:"./public"
    },
    module: {
        rules: [
            { test: /.(js|jsx)$/, exclude: /node_modules/, loader: babel-loader }
        ]
    }
};

接下來(lái)繼續(xù)試試npm run server，依然報(bào)錯(cuò)：

此處仍然有一坑！由于我們的jsx是用es6語(yǔ)法編寫(xiě)的，因此需要通過(guò)label來(lái)解析，那么實(shí)際上此處還缺少一個(gè)文件，就是“.babelrc”，注意這是一個(gè)名稱(chēng)很奇葩的文件，只有擴(kuò)展名而沒(méi)有文件名，該文件在windows環(huán)境下是無(wú)法通過(guò)資源管理器創(chuàng)建的，需要到命令行下執(zhí)行type null>.babelrc命令：

type null>.babelrc

雖然提示“系統(tǒng)找不到指定的文件”，但是實(shí)際上已經(jīng)創(chuàng)建了.babelrc文件，隨后用文本編輯器將該文件打開(kāi)，輸入內(nèi)容：

{
  "presets": ["react", "es2015"],
  "env": {
    "dev": {
        "plugins": [["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
           }]
        }]]
    }
  }
}

至此，再執(zhí)行npm run server，終于可以看到頁(yè)面正常顯示了！

如果此時(shí)頁(yè)面還不能正常顯示的話，也許就要清理下緩存，重新生成bundle.js文件?；蛘咴趐ackage.json中的scripts中增加“start“命令，其值為“webpack”，即：

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},

這樣在命令行中執(zhí)行“npm start”就可以重新編譯jsx為bundle.js了。

npm start

再總結(jié)一下我們遇到的坑：

npm初始化時(shí)的項(xiàng)目名稱(chēng)要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。
安裝webpack-cli。
loaders已過(guò)時(shí)，需要替換為rules。
需要?jiǎng)?chuàng)建.babelrc文件。

至此我們便搭建了一個(gè)最簡(jiǎn)單的webpack+react環(huán)境，當(dāng)我們修改index.jsx中的內(nèi)容時(shí)，頁(yè)面刷新后也會(huì)發(fā)生改變，接下來(lái)就可以好好學(xué)習(xí)react了！

當(dāng)然，我們可以更改webpack.config.js中的devServer，添加inline:true，這樣便可以實(shí)現(xiàn)jsx更改后，頁(yè)面會(huì)自動(dòng)刷新，不用我們每次修改后都去手動(dòng)刷新去看效果了。另外再增加mode:"development"，這樣刷新的速度會(huì)大大加快！

最終的文件目錄結(jié)構(gòu)為：

各文件的最終內(nèi)容：

index.html

DOCTYPE html>
<html>
<head>
head>
<body>
    <div id=root>div>
    <script  src=bundle.js>script>
body>
html>

index.jsx

import React from react
import { render } from react-dom

class Home extends React.Component{
    render(){
    return(
            Hello react! 
    )
    }
}
render(
    ,document.getElementById(root)
)

.babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "dev": {
        "plugins": [["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
           }]
        }]]
    }
  }
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.16.1",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
  }
}

webpack.config.js

module.exports={
   mode:"development",
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:bundle.js
    },
    devServer:{
        contentBase:"./public",
       inline:true
    },
    module: {
        rules: [
            { test: /.(js|jsx)$/, exclude: /node_modules/, loader: babel-loader }
        ]
    }
};

GPU云服務(wù)器云服務(wù)器 webpack搭建 lamp環(huán)境的搭建 php環(huán)境的搭建 php的環(huán)境搭建

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1912.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 736·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿(mǎn)意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6184·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

最小白的webpack+react環(huán)境搭建

相關(guān)文章

**從react-start到co源碼(一)**

react學(xué)習(xí)日記第一記-webpack配置

react學(xué)習(xí)日記第一記-webpack配置

react學(xué)習(xí)日記第一記-webpack配置

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿(mǎn)意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

最小白的webpack+react環(huán)境搭建

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！