Webpack + React學習筆記(一) —— 準備

前言

這篇文章用來記錄從無到有的Webpack + React的學習筆記。

開始

一開始什麼都沒有。

step1：初始化項目

1.mkdir react-what-i-like 建立一個空的文件夾。
2.cd react-what-i-like 切換到該文件夾。
3.npm init 初始化該項目 -> 一路回車，能夠看到生成了package.json。

4.mkdir public:建立public文件夾用來放打包後的文件以及index.html文件

step2: 安裝react和webpack

1. npm install --save react 安裝react。

2. npm install --save react-dom 安裝react-dom。

3. npm install -g webpack 全局安裝webpack。

4. npm install --save-dev webpack 安裝webpack到項目。

5. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 安裝babel相關的包。（必需， 不然react中的語法會報錯）

--save和--save-dev的區別：
--save： 項目上線運行仍然要用到的東西，好比react， 上線後仍然須要。
--save-dev： 僅開發階段所須要，好比webpack， 僅開發的階段須要，項目上線以後並不須要。

安裝成功後package.json中的內容以下，注意dependencies和devDependencies對應的就是--save和--save-dev

step3: Hello World

1. touch index.html 建立入口html文件，寫入內容以下：

mv index.html ./public/把index.html移動到public文件夾下

2.touch index.js 建立入口js文件 ，寫入

3.配置webpack:
touch webpack.config.js建立webpack的配置文件。配置文件中寫入以下：

這些都是webpack的配置，關於webpack的教程不少，推薦一篇入門Webpack，看這篇就夠了。若是嫌太長不想看，那我就着上面這個圖把圖裏的配置講一下吧。

entry: __dirname + '/index.js'： 入口文件(__dirname指的是當前項目的根目錄)。
output.path: 把文件打包到哪。
output.filename: 打包後文件叫啥。
loaders中的test, loader, exclude： 分別表示對於怎樣的文件，用什麼loader來處理， 除開哪些文件。圖中的loader的意思是，對於node_modules之外的後綴名爲js或者jsx的文件， 用babel-loader來處理。
至於爲何是後綴名爲js或者jsx，這裏是個正則，x後面跟的問號表示x出現0次或者1次。$表示結尾。圖示以下：

4.配置.babelrc:
touch .babelrc: 建立babel的配置文件。在文件中寫入：

在上面的3中，咱們用babel-loader來處理後綴名爲js或者jsx的文件，可是沒有指明按照怎樣的轉碼規則來處理這些文件，因此這裏的presets指明的就是轉碼規則。

es2015: 用來編譯es6語法
stage-0: 用來編譯一些es7語法（還沒定下來）
react: 用來編譯react的語法

5.命令行裏輸入webpack，開始打包，獲得：

6.在瀏覽器中打開index.html

大功告成。