如何手動使用webpack搭建一個react專案
前言
搭一個腳手架真不是一件容易的事,之前為了學習webpack是怎麼配置的選擇自己搭建開發環境,折騰了好幾天總算對入口檔案、打包輸出、JSX, es6編譯成es5、css載入、壓縮程式碼等這些基礎的東西有了一個大體的瞭解。
大體專案結構(模仿網上大佬)
然後就是正題了,當然最先要做的是要建一個資料夾 (cd 到指定檔案 使用mkdir react-app建立一個專案檔案)
然後cd react-app 命令列使用npm init
初始化生成一個package.json檔案(node自行安裝)
安裝webpack: npm install webpack --save-dev
全域性安裝: npm install webpack -g
(全域性安裝以後才可以直接在命令列使用webpack)
注意:這裡說一下webpack必須安裝為全域性,否則webpack會報錯不是內部命令
下載完webpack後,建一個webpack.config.js檔案
entry為入口檔案,output為出口檔案(因為路徑這裡我專案結構有變化,所以到時候看你自己)
新增模板檔案index.html (這個我就不細說了,就是一個普通的html檔案)
開始React專案
npm install react react-dom --save-dev
下載完成以後,在src裡邊建一個index.js的檔案
然後在index.html引入
然後這時候去執行一下webpack,你回發現報錯
這個東西我在網上查了很多東西,最後換了個思路去解決的,利用webpack-dev-server 搭建一個啟動專案的本地伺服器
webpack-dev-server實現自動重新整理
全域性安裝:npm install webpack-dev-server --g
(全域性安裝以後才可以直接在命令列使用webpack-dev-server)
然後把這個命令放在npm 啟動
現在去執行一個 npm run dev你會發現還有報錯
照著他的提示去改就可以了
命令列輸入 npm audit fix --force 然後執行繼續輸入一個 npm audit 然後會看到
然後這個 audit fix我看了一下大體意思好像是一些程式碼檢查還是什麼的
這時候你去執行一下 npm run dev
專案成功啟動
然後中間還有一些js/JSX es5轉es6 css sass less 自己去百度下載就好,最後別忘了放入 webpack.config.js