1. 程式人生 > >如何手動使用webpack搭建一個react專案

如何手動使用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