一個簡單的用webpack搭建react專案例項
廢話不多說，直接開始。
雖然說是用webpack搭建react專案，但因為是我自己的命名和開發習慣，因此大家不一定要按照我的寫法來寫，選擇適合自己的就好
在進行搭建專案之前，要準備一個非常重要的東西，那就是NODE。
如果不知道NODE的話，那麼接下來你是無法操作的。
這裡簡單的介紹下NODE和我們的安裝包的工具NPM
Node，即nodejs， 是一個基於Chrome JavaScript 執行時建立的一個平臺。
在構建專案的腳手架時，我們需要使用node的npm來安裝一些module。
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS程式碼部署上的很多問題
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。
允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。
只有通過npm，我們才能夠快速方便的安裝我們在構建專案是所需的包
然後，當配置完NODE之後，便可以開始搭建react專案了。
開始搭建專案
首先，這是我開發專案時常用的檔案樹的
--public
--src
--.babel
--.gitgnore
--package.json
--webpack.config.js
首先，我們先新建一個資料夾，命名為react-cli（隨意）
在資料夾中新建public和src兩個資料夾。
這裡解釋一下為什麼要新建這兩個資料夾
1.Src ：用來儲存react的元件和入口檔案等，是專案的身體部分。
2.Public： public目錄用來存放所有靜態資源以及我們最重要的的index.html檔案
相信使用過react的腳手架的同學對此一定不會陌生。
然後在public下建立我們的入口檔案index.html。
完成後應該是這樣的：
之後，我們在index.html內寫入一些程式碼。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <title>React Starter</title> 8 </head> 9 10 <body> 11 <div id="root"></div> 12 <noscript> 13 this is a react project 14 </noscript> 15 <script src="../dist/bundle.js"></script> 16 </body> 17 18 </html>
這裡有兩行需要特別留意。一個是<div id=“root”></div> 。我們的react 應用可是要掛在裡面。
另一個是<script src=“../dist/bundle.js”></script>這個檔案裡面會寫我們的react程式碼。當然這裡可以隨便取名字。
這樣，我們的第一步就完成了
接下來開始我們的第二步：
首先將命令列移到cli目錄下。
執行 npm init（npm init -y） 語句並配置生成的package.json
這條語句是用來建立我們的package.json檔案，有了它，我們便可以安裝一些依賴項和配置項。
執行完之後樣子是這樣的
packge.json裡是這樣子的：
1 { 2 "name": "cli", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC" 12 }
這裡解釋一下主要的部分
Name:專案名。
Version：版本。
Main：主入口檔案。
Scripts：在這裡可以配置一些啟動項和debug項，讓專案的啟動和debug命令簡化
devDependencies：在開發環境下安裝的依賴項，不會隨著專案打包被帶走。
preeDependencies:有時，你的專案和所依賴的模組，都會同時依賴另一個模組，但是所依賴的版本不一樣。 preeDependencies ，在模板安裝的時候提醒使用者安裝最高該模組的最高版本
dependencies：生產和開發都會用到的依賴，最後會被打包到專案中。
這裡的內容我們會在之後的過程中逐漸的更改，現在先這樣。
第三步：建立並配置webpack檔案
在專案目錄下建立webpack.config.js檔案
這個檔案便是webpack的配置檔案，我們將會在這裡配置一些項，來製作出react專案。
在配置webpack之前，我們需要安裝一些依賴項，通過NPM
因為只是簡單的製作，所以就不安裝過多的依賴項，只需安裝
webpack webpack-cli webpack-dev-server css-loader style-loader 在命令列輸入以下指令：npm install webpack webpack-cli webpack-dev-server css-loader style-loader -D
便會安裝這些依賴項
安裝完以後packag.json會變成這樣
1 { 2 "name": "cli", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "dependencies": {}, 13 "devDependencies": { 14 "css-loader": "^4.2.1", 15 "style-loader": "^1.2.1", 16 "webpack": "^4.44.1", 17 "webpack-cli": "^3.3.12", 18 "webpack-dev-server": "^3.11.0" 19 } 20 }
同時會多一個packag-lock.json，用過NODE應該都知道是啥，就不講了。
現在開始配置webpack程式碼如下
1 const path = require("path"); 2 const webpack = require("webpack"); 3 4 module.exports = { 5 entry: "./src/index.jsx", 6 mode: "development", 7 module: { 8 rules: [ 9 { 10 test: /\.css$/, 11 use: ["style-loader", "css-loader"], 12 }, 13 ], 14 }, 15 resolve: { extensions: ["*", ".js", ".jsx"] }, 16 output: { 17 path: path.resolve(__dirname, "dist/"), 18 publicPath: "/dist/", 19 filename: "bundle.js", 20 }, 21 devServer: { 22 contentBase: path.join(__dirname, "public/"), 23 port: 3000, 24 hot: true, 25 open:true, 26 overlay: { 27 warnings: true, 28 errors: true, 29 }, 30 publicPath: "http://localhost:3000/dist/", 31 hotOnly: true, 32 }, 33 plugins: [new webpack.HotModuleReplacementPlugin()], 34 };
解釋一下各配置項：
1、Entry：告訴webpack我們的應用程式從哪兒開始以及從哪裡開始打包我們的檔案。
2、Mode：告訴webpack我們正在以開發模式執行，這使我們不必在執行開發伺服器時新增模式標誌。
3、Module：物件定義你匯出的javascript模組如何轉換以及那些檔案要根據給定的rules進行轉換。
其中的rules的配置項為：
Test：要被解析的檔案型別。
Exclude: 不包括哪裡的檔案。
Use:配置用來解析檔案的loader，包含：
Loader：loader項。
Options：一些條件和強調項。
其中的loader的配置項是使用各種檔案的解析依賴項，如css，js，less等。
4、Resolve：哪些型別的檔案要進行處理，這也允許我們在匯入modules的時候不用寫副檔名。
5、Output：告訴webpack我們打包之後的程式碼在哪裡輸出。
publicPath屬性定義了我們打包後的檔案應該跑到哪個目錄裡。同時告訴webpack-dev-server從哪裡去啟動我們的服務。
這個publicPath屬性是一個特殊的屬性 ，它可以幫助我們進行dev-server操作。他可以定義我們的公共url的目錄，起碼webpack-dev-server會很關心這一點。如果設定錯了，就會報404錯誤。
6、devServer：用來啟動webpack-dev-server服務。
這裡並沒有太多的要求。只要標出我們的靜態資源放那兒（比方說我們的index.html）以及我們要在哪個埠啟動該服務。你可以看到devServer也有一個publicPath，這裡的publicPath是為了告訴server我們打包後的檔案在哪兒。需要留心的是 output.publicPath 和 devServer.publicPath是不一樣的。
7、Plugins: 用來配置一些有用的外掛，例如熱更新外掛HotModuleReplacementPlugin
如果不配置這個外掛，每次更新程式碼儲存後需要重新啟動webpack-dev-server，而配置了這個外掛，則可以在儲存程式碼後自動的進行更新。
到這裡，webpack就基本配置完成，但這裡還有一個坑，為了強調一下，就放在這裡講。
我們知道react使用的是jsx語法，而wepack無法解析jsx，所以這裡我們的需要配置babel，用babel來解析jsx成js語法。因此我們需要配置babel檔案。
配置babel檔案步驟：
- 建立.babelrc檔案。
- Npm安裝babel-core， babel-cli， preset-react， preset-env
npm install @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader -D
- 在.babel 配置 “presets”: [“@babel/env”, “@babel/preset-react”]，告訴babel 我們要使用env和react這兩個預設。
此時我們的babel就配置完成。
然後在module的rules裡配置babel-loader就可以了，配置完成後是這樣的
.babel:
1 { 2 "presets": ["@babel/env", "@babel/preset-react"] //使用env和react 來解析es6和jsx 3 }
webpack.config.js(多加的地方已加色加粗)
1 const path = require("path"); 2 const webpack = require("webpack"); 3 4 module.exports = { 5 entry: "./src/index.jsx", 6 mode: "development", 7 module: { 8 rules: [ 9 { 10 test: /\.(js|jsx)$/, 11 exclude: /(node_modules|bower_tcomponents)/, 12 use: [ 13 { 14 loader: "babel-loader", 15 options: { presets: ["@babel/env"] }, 16 }, 17 ], 18 }, 19 { 20 test: /\.css$/, 21 use: ["style-loader", "css-loader"], 22 }, 23 ], 24 }, 25 resolve: { extensions: ["*", ".js", ".jsx"] }, 26 output: { 27 path: path.resolve(__dirname, "dist/"), 28 publicPath: "/dist/", 29 filename: "bundle.js", 30 }, 31 devServer: { 32 contentBase: path.join(__dirname, "public/"), 33 host: "0.0.0.0", 34 useLocalIp: true, 35 port: 3000, 36 hot: true, 37 open: true, 38 overlay: { 39 warnings: true, 40 errors: true, 41 }, 42 publicPath: "http://localhost:3000/dist/", 43 hotOnly: true, 44 }, 45 plugins: [new webpack.HotModuleReplacementPlugin()], 46 };
至此，webpack配置完成，此時我們的專案結構如下：
第四步：配置react的入口檔案
首先我們需要額外安裝兩個依賴包react以及react-dom。
命令列執行
1 npm install react react-dom -S
此時，你的packge.json應該是這樣
1 { 2 "name": "cli", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "dependencies": { 13 "react": "^16.13.1", 14 "react-dom": "^16.13.1" 15 }, 16 "devDependencies": { 17 "@babel/cli": "^7.10.5", 18 "@babel/core": "^7.11.1", 19 "@babel/preset-env": "^7.11.0", 20 "@babel/preset-react": "^7.10.4", 21 "babel-loader": "^8.1.0", 22 "css-loader": "^4.2.1", 23 "style-loader": "^1.2.1", 24 "webpack": "^4.44.1", 25 "webpack-cli": "^3.3.12", 26 "webpack-dev-server": "^3.11.0" 27 } 28 }
這裡解釋一下為什麼安這兩個依賴項：
React是 React庫的入口,只有引入React才能夠使用React的元件和元素。
ReactDom 用來做與瀏覽器或DOM相關的操作，例如ReactDom.render。
只有安裝它們才能夠寫react專案。
現在我們需要告訴Reactapp 我們要把reactapp掛在到哪個檔案
在src目錄下建立一個index.jsx檔案並寫入以下程式碼
1 import React from "react"; 2 import ReactDOM from "react-dom"; 3 class App extends React.Component { 4 render() { 5 return ( 6 <div className="App"> 7 <h1> Hello, World! </h1> 8 </div> 9 ); 10 } 11 } 12 ReactDOM.render(<App />, document.getElementById("root"));
ReactDom.render（）告訴react渲染什麼，在哪兒渲染。這裡我們將要渲染一個叫做APP（馬上就要建立了）的元件，渲染到我們index.html中的一個div中。
至此，主入口檔案建立完成，接下來便可以運行了。
第五步：執行webpack，啟動專案。
首先我們修改package.json
1 { 2 "name": "cli", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.jsx", 6 "scripts": { 7 "dev": "webpack-dev-server --mode development" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "dependencies": { 13 "react": "^16.13.1", 14 "react-dom": "^16.13.1" 15 }, 16 "devDependencies": { 17 "@babel/cli": "^7.10.5", 18 "@babel/core": "^7.11.1", 19 "@babel/preset-env": "^7.11.0", 20 "@babel/preset-react": "^7.10.4", 21 "babel-loader": "^8.1.0", 22 "css-loader": "^4.2.1", 23 "style-loader": "^1.2.1", 24 "webpack": "^4.44.1", 25 "webpack-cli": "^3.3.12", 26 "webpack-dev-server": "^3.11.0" 27 } 28 }
之後再命令列輸入
1 npm run dev
就會運行了
命令列是這樣的
同時會開啟一個網頁，寫著hello World
最後的專案結構為
至此，一個簡單的react專案構建完成
我會在後面逐步的介紹一些常用的webpack和babel的外掛。
感謝觀看
想要獲取程式碼的話請訪問我的GitHub：https://github.com/FuloliyaLansfroya/allProject