從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（這個大大寫的確實挺好，最起碼不會雲裡霧裡的，像我這種智商的都能看懂）

 

從0開始學習react（二）