從0開始學習react(二)


今天,開始學習第二節!!!

工欲善其事,必先利其器

react推薦我們使用webpack來打包文件,那么我們就用吧!(其實真心不想用啊)

至於好處網上寫的天花亂墜的,大家自行解決啊...

這節主要就學習怎么配置webpack了,這玩意我搗鼓了整整一天才弄的一知半解,哎,腦子差就是吃虧...

1.提前准備工作

(ps:自己裝好node啊,別怪我沒提醒你)

首先,你需要有一個自己的文件夾,至於什么名字你自己看着辦,我的叫做  reactdemo

里面放一個測試的html加一個js文件夾

 

2.安裝

  2.1

點擊win+r,輸入cmd進入控制台,然后進入自己的目錄

輸入npm init

里面的東西一路回車就好

然后進入你的文件夾里面看是不是多了個package.json的文件

  2.2

ok,現在我們先來一發全局安裝。

繼續輸入npm install -g webpack

然后默默等待...

  2.3

現在可以配置webpack了,這個要下的東西比較多,網速不好者默哀吧(我整整用了2個小時  - -!)

Style-loader加載器

輸入npm install style-loader --save-dev

(加載器部分就不在上圖了啊,因為剛裝過,在裝一遍太浪費時間了,不好意思啊,原諒我的懶惰吧)

css-loader加載器

輸入npm install css-loader --save-dev

 

jsx-loader加載器

輸入npm install jsx-loader --save-dev

 

之后局部安裝webpack

輸入npm install webpack --save-dev

成功后你的文件夾變身成為這個樣紙:

 

3.使用

這個用之前,還要創建一個webpack.config.js的文件,這個文件呢,就是告訴webpack你要做什么,這里是個demo,所以里面就寫簡單點(多了的我還沒搞懂呢,哼!)

終於到能用的時候了,想想內心還是有點小激動的呢!

 

當當當當,成功啦...

這時候你的文件夾成了這個樣紙:

 

 

webpack自動幫我們生成了build文件夾,里面有個build.js...

然而我的html里也不用再引入index.js,直接引入build.js就可以了...

 

這樣基本就都差不多了

另外我自己在用的時候還遇見過出現不是內部命令(好像是叫這個,大家懂就好啦)這個錯誤,這里將解決方法也貼出來好了

一般這種情況是因為環境變量的問題

我們通過按win+Pause進入

 

選擇我畫的那個,點擊這個:

進入后:

點擊編輯或者雙擊將路徑添加進去。

這個時候聰明的寶寶就會問路徑在哪啊?額,疏忽了,這個你們看完路徑可能要從上面再來一遍。

路徑:

接着進入:

找到webpack.cmd:

反正我的在這里,別人的是不是我還真不知道。

復制這個:

好啦,這個就是路徑啦,添加到上面說的環境變量里,就OK啦!!!

結尾名言:不存在十全十美的文章,如同不存在徹頭徹尾的絕望。

 

(上一章被GM鄙視了,說不是技術文章,不讓放首頁,確實我很菜,但也不用這樣吧!!!氣煞我也;氣煞我也;氣煞我也...)

參考資料:webpack官方網站 http://webpack.github.io/

     30分鍾手把手教你學webpack實戰 http://www.th7.cn/web/html-css/201509/120709.shtml(這個大大寫的確實挺好,最起碼不會雲里霧里的,像我這種智商的都能看懂)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM