【React】從無到有，用 webpack5 展開的 5 分鐘 React 之旅

因為本機跑 CRA 執行太過龜速，
結果一腳踏入了webpack坑，
發現這坑實在太深了，
只能一步步筆記下來，
不然改天就忘了自己到底做過什麼…

目錄

前置說明

準備 webpack 環境

初始化 npm 專案
安裝 webpack 相關套件
新增 config 檔

建立 React 專案

安裝 React
新增基本網頁

執行專案

加入指令
運行網頁

參考資料


前置說明

文章內容包含

  • 如何用 webpack5 架構出 react 開發環境

不包含

  • 如何使用 React
  • React 相關語法說明

環境

  • Visual Stusio Code v1.51.1
  • Node.js v12.16.2
  • npm v6.14.4

（本文建議同時搭配《webpack 筆記》服用）

準備 webpack 環境

初始化 npm 專案

用 Visual Stusio Code 開啟一個空的新專案資料夾，
terminal 執行 npm init 產出 package.json 檔案

使用 npm init -y 可以跳過設定，直接使用預設值

安裝 webpack 相關套件

  • webpack 相關
    • webpack
    • webpack-cli
    • webpack-dev-server
  • babel 相關
    • babel-loader
    • @babel/core
    • @babel/preset-react
    • @babel/preset-env
  • 編譯輔助套件
    • html-webpack-plugin
    • clean-webpack-plugin

安裝的參數皆相同，以下為全部一次安裝的指令：

1
npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-react @babel/preset-env html-webpack-plugin　clean-webpack-plugin --save-dev

新增 config 檔

在根目錄新增 webpack.config.js 檔案，內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = () => {
    return {
        entry: {
            main: path.resolve(__dirname, './src/App.jsx')
        },
        output: {
            path: path.resolve(__dirname, './build'),
            filename: 'js/[name].bundle.js',
        },
        module:{
            rules:[
                {
                    test: /.jsx$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-react",
                                // "@babel/preset-env"
                            ]
                        }
                    }
                },
                {
                    test: /.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-react",
                                // "@babel/preset-env"
                            ]
                        }
                    }
                },
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Document111',
                template: './src/index.html',
                filename: 'index.html',
            }),
            new CleanWebpackPlugin(),
        ],
        devServer:{
            open: true,
            port: 8300,
            inline:true,
        }
    }
};

看這落落長一大串，
完全能夠理解 CRA 誕生的原因了呢…

因為內容太多也太雜，
各項設定具體說明請參考【JS】Webpack 筆記
這裡就不花版面一一解釋。


到這裡為止環境備妥，可以使用 react 了！


建立 React 專案

安裝 React

1
npm install react react-dom

程式規模不大的話，可以改成在下一步驟新增的 index.html 中引入 CDN，這部分請見 React 官網 使用說明

新增基本網頁

依照 webpack.config.js 裡面的設定，
在根目錄底下新增 src 資料夾，
放入 index.html 和 App.jsx 兩個檔案

【index.html】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

【App.jsx】

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';

let element = <h1>Hello, world!</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
);

環境準備完畢，資料夾結構如下：

node_modules
　|
src ──┐
　|　　App.jsx
　|　　index.html
package-lock.json
　|
package.json
　|
webpack.config.js


執行專案

加入指令

package.json 檔案中加入指令

1
2
3
4
5
"scripts": {
	"dev": "webpack serve --config webpack.config.js --mode development",
	"build": "webpack",
	...
},

webpack5 不支援舊版的 webpack-dev-server 這個指令了，執行 webpack-dev-server 的 command 要改為 webpack serve。

運行網頁

terminal 執行 npm run dev運行網站
Hello World!

5 分鐘用 webpack 建立 React 網站完成！


參考資料

webpack教程：如何從頭開始設置 webpack 5（主要參考文章）
[ReactJS] 使用Webpack, npm建置React開發環境
逐步建置React + Webpack開發環境