今天,開始學習第二節!!!
工欲善其事,必先利其器
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(這個大大寫的確實挺好,最起碼不會雲里霧里的,像我這種智商的都能看懂)
