基於webpack搭建一個React項目

最近接到需求使用React來搭建一個較爲複雜的頁面，所以先基於webpack來搭建了一個簡易的初始結構。項目地址：https://github.com/Kasol/React4Webpack.git

可以clone下來直接npm start運行。由於想從目錄結構開始入手，所以沒有使用React的腳手架來搭建。下面記錄下探索過程的一些小坑。

1. babel-loader
   webpack的關鍵配置就是loader，由於babel內置對JSX的支持，所以安裝babel-loader即可，但是在安裝過程中，出現了一些babel版本的兼容問題。babel-loader裝的是8.x，但是babel裝的是6.x,並且babel在7.0之後，發佈的模塊目錄結構和原先有所不同，原先是babel-*這樣，之後收攏到@babel這個命名空間下，所以babel-loader是去引用@babel下的模塊，我沒有裝就報錯了。於是乎升級了babel到了7.0。正確安裝相應模塊後即可生效。

2. .babelrc
   主要是presets的設置，babel升級後，相應預設的寫法也要改變

    "presets": ["@babel/preset-react", "@babel/preset-env"],

3. scss-loader
   由於想書寫模塊化的css，這裏我選擇了scss，所以配置loader的時候，要注意scss-loader的版本

4. webpack的配置文件
   針對開發 和 線上寫了倆個配置，然後利用webpack-merge這個模塊來合併配置，本地會利用webpack-dev-server來啓動靜態資源服務，可以實時查看運行效果