JavaScript
搜索
分类

webpack5搭建一个简易的react脚手架项目实践

作者：进击的cks 时间：2024-04-18 10:02:37　

项目初始化

首先我们创建一个目录，初始化 npm,得到一个package.json文件。

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

安装webpack

安装webpack和相关依赖。webpack-dev-server是开启开发环境的服务，webpack-merge是合并公共配置文件。

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

这个时候得到以下结构

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

搭建脚手架目录结构

现在，我们将创建以下目录结构、文件和内容：

react-cli
 |- node_modules
 |- package.json
 |- package-lock.json
+ |- public
+   |- index.html        //入口文件
+ |- src
+   |- App.js
+   |- index.css    
+   |- App.scss           //测试sass
+   |- index.js
+ |- webpack.common.js    //开发和生产环境的公共配置
+ |- webpack.prod.js      //开发环境的配置
+ |- webpack.dev.js       //生产环境的配置

public的index.html的内容如下：

<!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的内容如下：

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

开启本地服务

我们先安装html-webpack-plugin。该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

npm i html-webpack-plugin -D
复制代码

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进行合并公共配置：

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
 mode: "development",   //开发环境
 devtool: "inline-source-map"  //可以查看代码报错的位置
});

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

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

然后控制台npm run dev回车，打开http://localhost:8080 ，如果页面出现cks证明开启本地服务成功，更多详细配置查看webpack官网 webpack.docschina.org/guides/ 。

配置css&sass

我们安装样式文件相关的loader，在webpack 5 中，可以使用内置的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"] // 注意执行顺序是后往前
     },
     {
       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的相关依赖

我们要在生产环境安装react和react-dom，因为react的编译依赖babel，我们也安 * abel相关的依赖。babel主要是以下这些：

  • "babel-loader": 转义 js 文件代码的 loader

  • "@babel/core": babel 核心库

  • "@babel/preset-env": ES6转ES5

  • "@babel/preset-react": 转换 JSX 为函数

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

修改webpack.common.js文件,添加babel的loader，当然也可以使用配置文件.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"] // 注意执行顺序是后往前
     },
     {
       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"),
 }
};

然后我们在src的index.js中导入的App组件，将组件渲染到页面。因为我是安装的是React18, React 18 不再支持 ReactDOM.render，改用 createRoot。更多请查看reactjs.org/link/switch&hellip;, 我们修改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 />);

浏览器打开http://localhost:8080/ 得到以下内容证明添加react成功了。

webpack5搭建一个简易的react脚手架项目实践

项目添加热更新

HMR 全称为 Hot Module Replacement ，中文意思为热模块替换。是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。如下开启热模块替换：

devServer: {
    hot: true,
 }

上面那个是默认开启的，我们就不配置了，但是设置那个只是样式文件进行了热更新，我们的jsx或者js修改还是重新刷新的。所以我们要修改src的index.js文件进行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 />);

// 如果启动webpack热更新，则会执行一下代码
if (module.hot) {
 module.hot.accept("./App.js", () => {
   const NextApp = require("./App.js").default;
   // 再次挂在到dom元素上
   root.render(<NextApp />)
 })
}

生产环境打包

我们为webpack.prod.js添加以下代码进行简单打包。更多打包优化查看webpack.docschina.org/guides/

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
 mode: "development",   //开启生产环境
 output: {
   clean: true   // webpack5的新特性，在生成文件之前清空 output 目录
 }
});

同时修改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打包。

来源：https://juejin.cn/post/7095249957141102629

标签：webpack5,react,脚手架
0
投稿

猜你喜欢

  • 实例详解JavaScript中setTimeout函数的执行顺序

    2024-04-22 13:25:09

  • Python-jenkins模块获取jobs的执行状态操作

    2022-07-29 14:15:09

  • vue实现动态控制el-table表格列的展示与隐藏

    2024-05-05 09:07:26

  • T-SQL查询为何慎用IN和NOT IN详解

    2024-01-21 08:26:01

  • SQL Server 2005：数据类型最大值

    2009-06-04 09:55:00

  • Python使用time模块实现指定时间触发器示例

    2022-05-13 02:57:59

  • python标准库学习之sys模块详解

    2021-08-02 02:25:19

  • Python面向对象编程（一）

    2023-04-27 15:02:13

  • ASP技巧：ASP中三个常用语句的使用技巧

    2008-10-16 10:56:00

  • python3实现UDP协议的服务器和客户端

    2022-07-01 09:17:08

  • CSS清除浮动常用方法小结

    2009-07-07 11:59:00

  • Python 中的反转字符串reversed(),切片

    2021-05-27 15:03:06

  • Linux oracle数据库自动备份自动压缩脚本代码

    2024-01-19 01:44:40

  • 彻底删除SQL Server注册表的方法

    2024-01-26 10:43:06

  • FSO中的SubFolders 属性介绍

    2008-01-05 13:57:00

  • springboot 启动时初始化数据库的步骤

    2024-01-26 18:32:57

  • 一道关于数据库(经典父子级 ID 关联)更新题

    2024-01-17 00:07:19

  • 在命令行用 sort 进行排序的方法

    2023-02-23 07:07:38

  • MySQL 主从同步,事务回滚的实现原理

    2024-01-17 14:16:51

  • Python Django基础二之URL路由系统

    2021-05-12 11:50:07
    • asp之家 网络编程 m.aspxhome.com