【教程】Webpack搭建React開發環境詳細步驟

1. 安裝Node.js

Webpack實際是用Node.js寫的，所以要先安裝Node.js環境。而且Node.js中集成了NPM包管理，我們在後面用到的很多模塊都需要使用NPM下載。

首先進入Node.js的官網，選擇對應系統下載安裝包，對於 windows 用戶，直接下載安裝包安裝即可，如果是 Macos 用戶，推薦使用 brew 進行安裝。Node.js有很多版本，包括穩定版和開發版，不同的項目需要的Node.js版本不同，推薦大家安裝 8.x 以上的版本。

2. 安裝Webpack

在我們需要創建項目的地方，新建一個文件夾，例如我再C盤下創建了一個名爲myapp的文件夾（僅做演示，不建議放到系統盤下），那麼myapp就是當前項目的根目錄。
在項目根目錄的地址欄直接輸入cmd然後按回車，就可以在此目錄中打開命令提示符，如下圖所示：

在命令行輸入命令，自定生成package.json文件，用於存放項目的描述信息，執行以下命令：

cnpm init -y

注：本教程中統一使用淘寶鏡像cnpm命令安裝，使用該命令之前先檢查你的是否安裝了cnpm命令

輸入以下安裝命令，安裝webpack到本地項目：

cnpm install --save-dev webpack 
#或者簡寫
cnpm i -D webpack

安裝成功後會在myapp項目下自動生成以下node_modules目錄和package.json文件：

然後在安裝webpack-cli工具，執行以下命令：

cnpm i -D webpack-cli

命令執行完成後，我們需要在package.json文件中配置打包的命令。在package.json文件的scripts屬性中添加下面配置項：

{
    "scripts": {
        "build": "webpack --mode production"
    }
}

3. 安裝react和react-dom

命令提示符定位在當前項目根目錄下，依次執行以下命令：
安裝react：

cnpm i -S react

安裝react-dom：

cnpm i -S react-dom

安裝babel：

cnpm i babel-loader @babel/core @babel/preset-env -D

安裝babel preset-react：

cnpm i @babel/preset-react -D

4. 創建項目目錄結構與源文件

在項目創建webpack.config.js配置文件，並在配置文件中添加對JSX語法的Babel編譯支持，文件內容如下：

module.exports = {
    resolve: {
        extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // jsx/js文件的正則
                exclude: /node_modules/, // 排除 node_modules 文件夾
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 轉義的配置選項
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
};

在項目根目錄分別創建src和public文件夾，此時項目的結構就成了下面圖片中的效果：

src 目錄：用於存放項目的源碼文件，例如 .js 文件或 .jsx 文件；
public 目錄：用於存放項目的靜態文件，例如.html文件或圖片等

在public目錄下創建：index.html 文件（項目的默認首頁）；
在src目錄下創建：index.js、App.js 文件（編寫源代碼）；

public/index.html文件是項目默認首頁，內容如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

src/App.js文件是自定義組件，內容如下：

import React from 'react';

function App () {
	return (
		<div>
			React from Webpack
		</div>
	);
};
export default App;

src/index.js文件是項目的入口文件，內容如下：

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(<App />,document.getElementById('root'));

到此，我們項目的目錄結構就搭建完成了。
然後就是對我們創建的這些文件，做一些配置。先打開webpack.config.js文件，配置webpack的入口，添加以下內容：

module.exports = {
    entry: './src/index.js',  //添加入口配置項
    // ...
};

下面在來安裝html-webpack-plugin這個插件，執行以下命令：

cnpm i html-webpack-plugin -D

該插件主要有兩個作用：

爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題；

可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口。

安裝好後，再修改webpack.config.js配置，引入在webpack中使用插件：

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            inject: true
        })
    ]
};

上面的操作都完成之後，可以執行打包命令：

npm run build

如果在命令行中出現下面的內容，證明打包成功了：

成功打包後，項目的根目錄會生成一個dist的文件夾，文件夾中存放的是打包好的 .html 和 .js 文件。

5. 配置本地服務器

我們可以基於Node.js的Express搭建一個本地服務器，通過Express的中間件 webpack-dev-middleware 來實現與 Webpack的交互。實現本地服務需要以下三步：

第一步：安裝webpack-dev-server模塊
安裝命令：

cnpm i webpack-dev-server -D

第二步：配置服務項
安裝成功後，需要在webpack.config.js文件中配置服務器的相關設置：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, './public/'),
        publicPath: '/',
        host: '127.0.0.1',
        port: 3000,
        stats: {
            colors: true
        }
    },
    //......
};

第三步：設置啓動命令
在package.json文件的scripts屬性中，添加start啓動項：

{
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
    }
}

完成上面步驟後，在命令行裏執行 npm start 就可以啓動服務器了！
服務器啓動後，會自動打開瀏覽器，並訪問我們配置好的地址：

當源碼發生修改時，可以自動實現頁面的刷新。

到此，React環境就搭建成功了，我們可以在這個環境基礎上開發項目了。

總結

由於Webpack主要是用於項目的構建和打包，甚至有的同學在工作中根本就接觸不到Webpack，或者是項目中只配置一次Webpack，後面就不再用了。對於這些同學來說，希望這篇教程能夠給你帶來一些新的知識儲備，在以後用到的時候，能夠有操作的思路和方法。
也有同學會說，現在都是使用腳手架工具，直接用create-react-app搭建環境就好了，既方便又省事。首先，這個觀點是非常正確的，我也推薦大家使用腳手架工具搭建環境，但是作爲一個前端工程師來說，我們只有瞭解了環境的運行原理，才能更好的駕馭框架，代碼出現錯誤時，不至於不知所措。
Webpack不僅是學習前端框架的前提，也是同學們將來面試必問、筆試必考、工作必用的內容，隨着前端工程化的發展，Webpack正在變得越來越重要，尤其對於大型的一線互聯網公司，會不會Webpack甚至能直接決定你是否能被錄用。所以學好Webpack是步入前端開發工作的第一步。

【教程】Webpack搭建React開發環境詳細步驟

1. 安裝Node.js

2. 安裝Webpack

3. 安裝react和react-dom

4. 創建項目目錄結構與源文件

5. 配置本地服務器

總結

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

【大廠面試】滬江前端面試23問

【大廠面試】寺庫前端面試20問

【大廠面試】滴滴前端面試28問

【大廠面試】寶寶樹前端面試15問

JSX語法基礎和React自定義組件

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結