react+webpack+babel+webpcak-dev-server+react-router-dom從無到有

react-demo

兩個目標：

• 手動搭建react腳手架：react、bable、webpack、react-router-dom、webpack-dev-server
• 理解webpack從無到有打包原理

手動搭建react腳手架項目地址

有坑的地方會特別說明，由於好多文章都沒有給出babel和webpack-dev-server的版本，因此在搭建過程當中遇到比較多的問題。

1.react react react-dom

2.babel babel-loader babel-core babel-presets-es2015|stage-0|react

babel 這裏的坑：注意babel的版本號，好比運行時報錯babel/core找不到等等，須要下降babel的版本，

注意webpack.config.js配置文件中的loader書寫，須要從webpack官網找，有的博客寫的不對會形成錯誤

注意須要有一個.babelrc的文件

3.webpack

4.webpack-dev-server

使用webpack-dev-server --hot --inline --config webpack.config.js 運行報錯，注意下降webpack-dev-server的版本號

5.react-router-dom