webpack4.XX 從零開始搭建react項目 （一）

作過好幾個項目，可是項目的搭建基本都是腳手架一鍵生成的，或者大牛搭建好的，今天就本身從零開始搭建一個react項目，我會先打個基本框架，讓基本的功能先跑起來，後面再慢慢加功能，慢慢優化，路漫漫修遠兮，小夥伴們，共勉！閒言少敘，進入正題：

說明:該項目是基於window系統搭建的，ios操做方法有點不同，可是步驟是同樣的

1.新建一個項目文件夾  webpackReactApp 

2.進入該文件夾，按住shift右擊鼠標右鍵，選擇「在此處打開命令窗口」’

3.執行npm init -y  初始化項目

4.執行npm install webpack webpack-cli -D    （-D是--save-dev的簡寫，意思是保存到開發環境，不會打包上線；-S是--save的簡寫，意思是安裝的該依賴會打包到生產環境）

/**插播一段**/

咱們新建一個src文件夾，在裏面新建一個index.js文件

• 運行 npx webpack    發現多出來一個dist文件夾，這說明webpack默認打包文件爲src/index.js 默認輸出位置是dist文件夾 

     可是這種默認打包方式沒有任何意義，咱們要的是靈活多變的自定義配置，接下來咱們進入正題--開始一步一步創建一個react項目

1. npm install react react-dom  -S 

2.在src目錄下創建App.js

3.改寫src/index.js

4.新建public文件夾 在該目錄下新建一個index.html

5.新建webpack.config.js

6.修改package.json

接下來咱們運行npm run build   發現報錯，

意思是說我不識別es6語法的，解決辦法：

1.安裝babel  

npm install babel-loader babel-core babel-preset-env babel-preset-react -D

2.新建.babelrc

3.添加loader

4.運行 npm run build 發現報錯，什麼意思呢？意思是說你裝的babel-core版本是6.X的，你要對應裝babel-loader 7.X版本，安裝方法npm install babel-loader@7 -D    

那還等什麼，裝唄！

裝好後，咱們再運行npm run build, 打包成功！

咱們將打包出來的js文件引入public/index.html