【学习】使用webpack搭建react项目

前言

在日常工作中，我大多是在已有的项目基础上进行开发，而非从头构建项目。因此，我期望通过本次学习能填补我在项目初始化阶段知识的空白，与大家共同进步。在此过程中，我欢迎并感激任何指正或建议，无论是关于错误修正还是更优的解决策略，让我们相互促进，共同提升。

环境

在我们正式开发之前，请确认您的计算机已安装Node.js环境，这是进行后续任务的前提。如未安装，请访问Node.js官网(https://nodejs.org/)，根据您的操作系统挑选并安装最新版本。安装完毕后，通过在命令行界面分别执行node -v和npm -v命令，来检验Node.js及配套的npm（Node Package Manager）是否安装成功。若两命令均返回相应的版本号，即表明Node.js环境已准备就绪，包括npm，为接下来的开发工作奠定了基础。
在这里插入图片描述

在这里插入图片描述

1. 项目搭建

1.1 初始化

命令如下：

mkdir react-template
cd ./react-template
mkdir public
mkdir src
npm init -y

在这里插入图片描述

阅读 npm 文档 以了解有关 package.json 内在机制的更多信息。

1.2 安装webpack和webpack-cli（用于在命令行上运行webpack的工具）

命令如下：

npm install webpack webpack-cli --save-dev

注 --save-dev 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。将添加到package.json的devDependencies中。更多信息

1.3 目录下src文件夹下新建index.js

index.js:

function main() {try {const root = document.getElementById("root");if (root === null) {throw Error("root节点不存在");}root.innerHTML = "1 + 2 = 3;";} catch (error) {console.log(error);}
}
main();
1.4 目录下新建webpack.config.js

webpack配置文件
webpack.config.js：

const path = require("path");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",},
};
1.5 在package.json的scripts中添加build命令
"scripts": {"build": "webpack","test": "echo \"Error: no test specified\" && exit 1"
}
1.6 执行build命令
npm run build

在这里插入图片描述

1.7 在public文件夹下创建index.html并引入index.bundle.js

index.html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用webpack搭建react项目</title></head><body><div id="root"></div><script src="../dist/index.bundle.js"></script></body>
</html>

使用浏览器打开这文件如下：
在这里插入图片描述

1.8 安装typescript和相关loader

babel
typescript
babel-with-typescript
命令如下:

npm install --save-dev typescript babel-loader @babel/core @babel/preset-env @babel/preset-typescript
1.9 在目录下新建tsconfig.json和babel.config.json文件

tsconfig.json
babel.config.json
tsconfig.json：

{"compilerOptions": {"outDir": "./dist/","noImplicitAny": true,"module": "es6","target": "es5","jsx": "react","allowJs": true,"moduleResolution": "node","allowSyntheticDefaultImports": true},"include": ["src",],
}

babel.config.json:

{"presets": [["@babel/preset-env",{"targets": {"edge": "17","firefox": "60","chrome": "67","safari": "11.1"},"useBuiltIns": "usage","corejs": "3.6.5"}],"@babel/preset-typescript"]
}
1.10 更新webpack.config.js

webpack.config.js：

const path = require("path");
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.ts"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",},resolve: {extensions: [".ts", ".js"],},module: {rules: [{ test: /\.(ts|js)$/, use: "babel-loader", exclude: /node_modules/ },],},
};
1.11 src文件夹下index.js修改为index.ts

index.ts：

function main(elementId: string) {try {const root = document.getElementById(elementId);if (root === null) {throw Error("root节点不存在");}root.innerHTML = "2 + 2 = 4;";} catch (error) {console.log(error);}
}
main("root");
1.12 运行build命令后使用浏览器打开public下index.html文件

在这里插入图片描述

1.13 安装react，react-dom，@types/react，@types/react-dom和@babel/preset-react

react
react-dom
@babel/preset-react

npm install react react-dom
npm install --save-dev @babel/preset-react @types/react @types/react-dom
1.14 更新babel.config.json，webpack.config.js

babel.config.json：

{"presets": [["@babel/preset-env",{"targets": {"edge": "17","firefox": "60","chrome": "67","safari": "11.1"},"useBuiltIns": "usage","corejs": "3.6.5"}],"@babel/preset-react","@babel/preset-typescript"]
}

webpack.config.js:

const path = require("path");module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.ts"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",},resolve: {extensions: [".ts", ".js", ".tsx", ".jsx"],},module: {rules: [{test: /\.(ts|tsx|js|jsx)$/,use: "babel-loader",exclude: /node_modules/,},],},
};
1.15 src文件夹下index.ts修改为index.tsx

index.tsx:

import React from "react";
import { createRoot } from "react-dom/client";const App: React.FC = () => {return <div>2+3=5;</div>;
};const domNode = document.getElementById("root");
const root = createRoot(domNode);
root.render(<App />);
1.16 运行build命令

在这里插入图片描述

1.17 安装html-webpack-plugin

html-webpack-plugin

npm install --save-dev html-webpack-plugin
1.18 更新webpack.config.js

webpack.config.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.tsx"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",clean: true,},resolve: {extensions: [".ts", ".js", ".tsx", ".jsx"],},module: {rules: [{test: /\.(ts|tsx|js|jsx)$/,use: "babel-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};
1.19安装webpack-dev-server

webpack-dev-server
using-webpack-dev-server

npm install --save-dev webpack-dev-server
1.20 在package.json的scripts中添加dev命令
"scripts": {"dev": "webpack server --open","build": "webpack","test": "echo \"Error: no test specified\" && exit 1"
}
1.21 执行dev命令
npm run dev

在这里插入图片描述

1.22 将webpack.config.js重名为webpack.dev.js和修改dev命令
"scripts": {"dev": "webpack server --open --config webpack.dev.js","build": "webpack","test": "echo \"Error: no test specified\" && exit 1"
}
1.23 安装webpack-merge

webpack-merge

npm install --save-dev webpack-merge
1.24 新建webpack.common.js

webpack.common.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: path.resolve(__dirname, "./src/index.tsx"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",clean: true,},resolve: {extensions: [".ts", ".js", ".tsx", ".jsx"],},module: {rules: [{test: /\.(ts|tsx|js|jsx)$/,use: "babel-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};
1.25 修改webpack.dev.js

devtool

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");module.exports = merge(common, {mode: "development",devtool: "inline-source-map",
});
1.26 运行dev命令

在这里插入图片描述

1.27 新建webpack.prod.js

webpack.prod.js：

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");module.exports = merge(common, {mode: "production",
});
1.28 更新build命令
"scripts": {"dev": "webpack server --open --config webpack.dev.js","build": "webpack --config webpack.prod.js","test": "echo \"Error: no test specified\" && exit 1"
}
1.29 执行build命令

在这里插入图片描述

截至目前为止目录结构
在这里插入图片描述

1.30安装style-loader，css-loader，less-loader和less

style-loader
css-loader
less-loader
less

npm install less less-loader style-loader css-loader --save-dev
1.31 更新webpack.common.js

webpack.common.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: path.resolve(__dirname, "./src/index.tsx"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",clean: true,},resolve: {extensions: [".ts", ".js", ".tsx", ".jsx"],},module: {rules: [{test: /\.less$/i,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.(ts|tsx|js|jsx)$/,use: "babel-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};
1.32 在src文件夹下新建App.tsx,app.less文件

App.tsx：

import React, { useMemo } from "react";
import "./app.less";
export const App: React.FC = () => {return useMemo(() => {return <div className="red">App</div>;}, []);
};export default App;

app.less：

@red: red;
.red {color: @red;
}
1.33 修改index.tsx文件

index.tsx:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";const domNode = document.getElementById("root");
const root = createRoot(domNode);
root.render(<App />);
1.34 执行dev命令

在这里插入图片描述

1.35 更新webpack.common.js：

webpack.common.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: path.resolve(__dirname, "./src/index.tsx"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",clean: true,},resolve: {extensions: [".ts", ".js", ".tsx", ".jsx"],},module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset/resource",},{test: /\.less$/i,use: ["style-loader", "css-loader", "less-loader"],},{test: /\.(ts|tsx|js|jsx)$/,use: "babel-loader",exclude: /node_modules/,},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};
1.36 在根目录下新建images.d.ts声明文件

declaration-files
images.d.ts：

declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
1.37 更新tsconfig.json

tsconfig.json：

{"compilerOptions": {"outDir": "./dist/","noImplicitAny": true,"module": "es6","target": "es5","jsx": "react","allowJs": true,"moduleResolution": "node","allowSyntheticDefaultImports": true},"include": ["src","images.d.ts",],
}
1.38 在src目录下添加张图片并在App.tsx中引入

App.tsx：

import React, { useMemo } from "react";
import icon from "./app.jpg";
import "./app.less";
export const App: React.FC = () => {return useMemo(() => {return (<div className="red"><img src={icon} /></div>);}, []);
};export default App;

在这里插入图片描述

总结

本次搭建参考webpack官网指南,本文如有错误欢迎指出。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/884826.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

什么是人工智能体？

什么是人工智能体？

人工智能体&#xff08;AI Agent&#xff09;是指能够感知环境、做出决策并采取行动以实现特定目标的自主实体。以下是对人工智能体的具体介绍&#xff1a; 定义与核心概念 智能体的定义&#xff1a;智能体&#xff0c;英文名为Agent&#xff0c;是指具有智能的实体&#xff0…
阅读更多...
【初阶数据结构篇】链式结构二叉树（续）

【初阶数据结构篇】链式结构二叉树（续）

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…
阅读更多...
二叉树 最大深度(递归)

二叉树 最大深度(递归)

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2] 输出…
阅读更多...
python机器人Agent编程——实现一个本地大模型和爬虫结合的手机号归属地天气查询Agent

python机器人Agent编程——实现一个本地大模型和爬虫结合的手机号归属地天气查询Agent

目录 一、前言二、准备工作三、Agent结构四、python模块实现4.1 实现手机号归属地查询工具4.2实现天气查询工具4.3定义创建Agent主体4.4创建聊天界面 五、小结PS.扩展阅读ps1.六自由度机器人相关文章资源ps2.四轴机器相关文章资源ps3.移动小车相关文章资源ps3.wifi小车控制相关…
阅读更多...
python安装selenium，geckodriver，chromedriver

python安装selenium，geckodriver，chromedriver

安装浏览器 找到浏览器的版本号 chrome 版本 130.0.6723.92&#xff08;正式版本&#xff09; &#xff08;64 位&#xff09; firfox 116.0.3 (64 位)&#xff0c;但是后面运行的时候又自动更新到了 127.0.0.8923 安装selenium > pip install selenium > pip show …
阅读更多...
基于SSM+uniapp的营养食谱系统+LW参考示例

基于SSM+uniapp的营养食谱系统+LW参考示例

1.项目介绍 功能模块&#xff1a;用户管理、年龄类型管理、阶段食谱管理、体质类型管理、季节食谱管理、职业食谱管理等系统角色&#xff1a;管理员、普通用户技术栈&#xff1a;SSM&#xff0c;uniapp&#xff0c; Vue等测试环境&#xff1a;idea2024&#xff0c;HbuilderX&a…
阅读更多...
python常用的第三方库下载方法

python常用的第三方库下载方法

方法一&#xff1a;打开pycharm-打开项目-点击左侧图标查看已下载的第三方库-没有下载搜索后点击install即可直接安装--安装成功后会显示在installed列表 方法二&#xff1a;打开dos窗口输入命令“pip install requests“后按回车键&#xff0c;看到successfully既安装成功&…
阅读更多...
vue项目安装组件失败解决方法

vue项目安装组件失败解决方法

1.vue项目 npm install 失败 删除node_modules文件夹、package-lock.json 关掉安装对话框 重新打开对话框 npm install
阅读更多...
qt QComboBox详解

qt QComboBox详解

QComboBox是一个下拉选择框控件&#xff0c;用于从多个选项中选择一个。通过掌握QComboBox 的用法&#xff0c;你将能够在 Qt 项目中轻松添加和管理组合框组件&#xff0c;实现复杂的数据选择和交互功能。 重要方法 addItem(const QString &text)&#xff1a;将一个项目添…
阅读更多...
window 利用Putty免密登录远程服务器

window 利用Putty免密登录远程服务器

1 在本地电脑用putty-gen生成密钥 参考1 参考2 2 服务器端操作 将公钥上传至Linux服务器。 复制上述公钥到服务器端的authorized_keys文件 mkdir ~/.ssh vi ~/.ssh/authorized_keys在vi编辑器中&#xff0c;按下ShiftInsert键或者右键选择粘贴&#xff0c;即可将剪贴板中的文…
阅读更多...
JAVA基础：多重循环、方法、递归 （习题笔记）

JAVA基础：多重循环、方法、递归 （习题笔记）

一&#xff0c;编码题 1.打印九九乘法表 import java.util.*;public class PanTi {public static void main(String[] args) {Scanner input new Scanner(System.in);for (int i 0; i < 9; i) {//i控制行数/* System.out.println("。\t。\t。\t。\t。\t。\t。\t。\…
阅读更多...
微服务系列二：跨微服务请求优化，注册中心+OpenFeign

微服务系列二：跨微服务请求优化，注册中心+OpenFeign

目录 前言 一、纯 RestTemplate 方案存在的缺陷 二、注册中心模式介绍 三、注册中心技术&#xff1a;Nacos 3.1 Docker部署Nacos 3.2 服务注册 3.3 服务发现 四、代码优化&#xff1a;OpenFeign工具 4.1 OpenFeign快速入门 4.2 连接池的必要性 4.3 抽取服务、最佳实…
阅读更多...
国产数据库之Vastbase海量数据库 G100

国产数据库之Vastbase海量数据库 G100

海量数据库Vastbase是基于openGauss内核开发的企业级关系型数据库。其语法和Oracle数据库很像&#xff0c;基本是从Oracle数据库迁移到海量数据库&#xff0c;以下简单介绍入门的使用 1、建库操作 地址&#xff1a;x.x.x.x root/Qa2021 安装路径&#xff1a;/home/vastbase 创…
阅读更多...
爬虫学习4

爬虫学习4

from threading import Thread#创建任务 def func(name):for i in range(100):print(name,i)if __name__ __main__:#创建线程t1 Thread(targetfunc,args("1"))t2 Thread(targetfunc, args("2"))t1.start()t2.start()print("我是诛仙剑")from …
阅读更多...
不要只知道deepl翻译，这里有10个专业好用的翻译工具等着你。

不要只知道deepl翻译，这里有10个专业好用的翻译工具等着你。

deepl翻译的优点还是有很多的&#xff0c;比如翻译的准确性很高&#xff0c;支持翻译的语言有很多&#xff0c;并且支持翻译文件和文本。但是现在翻译工具那么多&#xff0c;大家需要翻译的场景也有很多&#xff0c;怎么能只拥有一个翻译工具呢。所以在这里我帮助大家寻找了一波…
阅读更多...
使用Docker Compose构建多容器应用

使用Docker Compose构建多容器应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Docker Compose构建多容器应用 引言 Docker Compose 简介 安装 Docker Compose 创建基本配置 运行多容器应用 查看服务状态 …
阅读更多...
WindowsDocker安装到D盘，C盘太占用空间了。

WindowsDocker安装到D盘，C盘太占用空间了。

Windows安装 Docker Desktop的时候，默认位置是安装在C盘，使用Docker下载的镜像文件也是保存在C盘，如果对Docker使用评率比较高的小伙伴，可能C盘空间，会被耗尽，有没有一种办法可以将Docker安装到其它磁盘，同时Docker的数据文件也保存在其他磁盘呢？ 答案是有的，我们可以…
阅读更多...
[MySQL#11] 索引底层(2) | B+树 | 索引的CURD | 全文索引

[MySQL#11] 索引底层(2) | B+树 | 索引的CURD | 全文索引

目录 1.B树的特点 索引结构 复盘 其他数据结构的对比 B树与B树总结 聚簇索引与非聚簇索引 辅助索引 2. 索引操作 主键索引 1. 创建主键索引 第一种方式 第二种方式 第三种方式 2. 查询索引 第一种方法 第二种方法 第三种方法 3. 删除索引 删除主键索引 删除…
阅读更多...
【小白学机器学习31】 大数定律，中心极限定理，标准正态分布与概率的使用

【小白学机器学习31】 大数定律，中心极限定理，标准正态分布与概率的使用

目录 1 正态分布相关的2个相关定理 1.1 大数定律&#xff1a;(证明了)分布的稳定性 1.2 中心极限定理&#xff1a;(证明了)分布的收敛性 2 使用标准差和概率的2种思路 2.1 标准正态分布的曲线 2.2 两种使用方式 2.3 第1种&#xff1a;按整数倍标准差δ 作为标准使用 2.…
阅读更多...
springcloud通过MDC实现分布式链路追踪

springcloud通过MDC实现分布式链路追踪

在DDD领域驱动设计中&#xff0c;我们使用SpringCloud来去实现&#xff0c;但排查错误的时候&#xff0c;通常会想到Skywalking&#xff0c;但是引入一个新的服务&#xff0c;增加了系统消耗和管理学习成本&#xff0c;对于大型项目比较适合&#xff0c;但是小的项目显得太过臃…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023