webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目實(shí)踐

更新時(shí)間：2022年05月09日 09:45:50 作者：進(jìn)擊的cks

本文文章主要介紹了webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

項(xiàng)目初始化

首先我們創(chuàng)建一個(gè)目錄，初始化 npm,得到一個(gè)package.json文件。

mkdir react-cli
cd react-cli
npm init -y

安裝webpack

安裝webpack和相關(guān)依賴(lài)。webpack-dev-server是開(kāi)啟開(kāi)發(fā)環(huán)境的服務(wù)，webpack-merge是合并公共配置文件。

npm install webpack webpack-cli webpack-dev-server webpack-merge -D

這個(gè)時(shí)候得到以下結(jié)構(gòu)

 react-cli
  |- node_modules
  |- package.json
  |- package-lock.json

搭建腳手架目錄結(jié)構(gòu)

現(xiàn)在，我們將創(chuàng)建以下目錄結(jié)構(gòu)、文件和內(nèi)容：

 react-cli
  |- node_modules
  |- package.json
  |- package-lock.json
+ |- public
+   |- index.html        //入口文件
+ |- src
+   |- App.js
+   |- index.css    
+   |- App.scss           //測(cè)試sass
+   |- index.js
+ |- webpack.common.js    //開(kāi)發(fā)和生產(chǎn)環(huán)境的公共配置
+ |- webpack.prod.js      //開(kāi)發(fā)環(huán)境的配置
+ |- webpack.dev.js       //生產(chǎn)環(huán)境的配置

public的index.html的內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react-cli</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src的index.js的內(nèi)容如下：

const root = document.getElementById("root");
root.innerHTML = "cks";

開(kāi)啟本地服務(wù)

我們先安裝html-webpack-plugin。該插件將為你生成一個(gè) HTML5 文件，在 body 中使用 script 標(biāo)簽引入你所有 webpack 生成的 bundle

npm i html-webpack-plugin -D
復(fù)制代碼

webpack.common.js的公共配置如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

webpack.dev.js的配置如下,我們使用webpack-merge進(jìn)行合并公共配置：

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
  mode: "development",   //開(kāi)發(fā)環(huán)境
  devtool: "inline-source-map"  //可以查看代碼報(bào)錯(cuò)的位置
});

修改package.json文件，加上dev命令。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js"
  },

然后控制臺(tái)npm run dev回車(chē)，打開(kāi)http://localhost:8080 ，如果頁(yè)面出現(xiàn)cks證明開(kāi)啟本地服務(wù)成功，更多詳細(xì)配置查看webpack官網(wǎng) webpack.docschina.org/guides/ 。

配置css&sass

我們安裝樣式文件相關(guān)的loader，在webpack 5 中，可以使用內(nèi)置的Asset Modules處理圖像和字體，我們不用額外安裝。

npm install --save-dev style-loader css-loader sass sass-loader

修改webpack.commmon.js文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  module: {
    rules: [
      {
        test: /css$/i,    //匹配css、scss文件
        use: ["style-loader", "css-loader", "sass-loader"] // 注意執(zhí)行順序是后往前
      },
      {
        test: /.(png|jpg|jpeg|svg|gif)$/i,
        type: "asset/resource"
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

這樣css和sass的樣式文件就能使用了。

安裝react的相關(guān)依賴(lài)

我們要在生產(chǎn)環(huán)境安裝react和react-dom，因?yàn)閞eact的編譯依賴(lài)babel，我們也安裝babel相關(guān)的依賴(lài)。babel主要是以下這些：

"babel-loader": 轉(zhuǎn)義 js 文件代碼的 loader
"@babel/core": babel 核心庫(kù)
"@babel/preset-env": ES6轉(zhuǎn)ES5
"@babel/preset-react": 轉(zhuǎn)換 JSX 為函數(shù)

npm install --save react react-dom

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D

修改webpack.common.js文件,添加babel的loader，當(dāng)然也可以使用配置文件.babelrc的形式。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  resolve: {
    extensions: [".js", ".json", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /css$/i,
        use: ["style-loader", "css-loader", "sass-loader"] // 注意執(zhí)行順序是后往前
      },
      {
        test: /.(png|jpg|jpeg|svg|gif)$/i,
        type: "asset/resource"
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      },
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

然后我們?cè)趕rc的index.js中導(dǎo)入的App組件，將組件渲染到頁(yè)面。因?yàn)槲沂前惭b的是React18, React 18 不再支持 ReactDOM.render，改用 createRoot。更多請(qǐng)查看reactjs.org/link/switch…, 我們修改index.js的代碼為：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

瀏覽器打開(kāi)http://localhost:8080/ 得到以下內(nèi)容證明添加react成功了。

項(xiàng)目添加熱更新

HMR 全稱(chēng)為 Hot Module Replacement ，中文意思為熱模塊替換。是 webpack 提供的最有用的功能之一。它允許在運(yùn)行時(shí)替換，添加，刪除各種模塊，而無(wú)需進(jìn)行完全刷新重新加載整個(gè)頁(yè)面。從 webpack-dev-server v4.0.0 開(kāi)始，熱模塊替換是默認(rèn)開(kāi)啟的。如下開(kāi)啟熱模塊替換：

  devServer: {
     hot: true,
  }

上面那個(gè)是默認(rèn)開(kāi)啟的，我們就不配置了，但是設(shè)置那個(gè)只是樣式文件進(jìn)行了熱更新，我們的jsx或者js修改還是重新刷新的。所以我們要修改src的index.js文件進(jìn)行react的熱更新。

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

// 如果啟動(dòng)webpack熱更新，則會(huì)執(zhí)行一下代碼
if (module.hot) {
  module.hot.accept("./App.js", () => {
    const NextApp = require("./App.js").default;
    // 再次掛在到dom元素上
    root.render(<NextApp />)
  })
}

生產(chǎn)環(huán)境打包

我們?yōu)閣ebpack.prod.js添加以下代碼進(jìn)行簡(jiǎn)單打包。更多打包優(yōu)化查看webpack.docschina.org/guides/

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
  mode: "development",   //開(kāi)啟生產(chǎn)環(huán)境
  output: {
    clean: true   // webpack5的新特性，在生成文件之前清空 output 目錄
  }
});

同時(shí)修改package.json文件代碼，添加打包命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }

然后npm run build打包。

總結(jié)

以上就是webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目的大概流程，并總結(jié)一些webpack5的新特性，后面我將總結(jié)一下webpack的打包優(yōu)化。

項(xiàng)目地址：https://gitee.com/chen-kangsen/react-cli

到此這篇關(guān)于webpack5搭建一個(gè)簡(jiǎn)易的react腳手架項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)webpack5搭建react腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: