新建一个 React TypeScript 项目,并使用 Webpack 进行构建和打包

要用 create-react-app 新建一个 React TypeScript 项目,并使用 Webpack 进行构建和打包,可以按照以下步骤进行操作:

步骤 1:使用 create-react-app 创建 React TypeScript 项目

  1. 确保你已经安装了 Node.js 和 npm(Node 包管理器)。

  2. 打开命令行工具,运行以下命令来安装 create-react-app

    npx create-react-app my-app --template typescript
    

    这里的 my-app 是你项目的名称,可以根据需要更改。

步骤 2:安装 Webpack 和相关插件

  1. 进入项目目录:

    cd my-app
    
  2. 安装 Webpack 和相关插件:

    npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
    
  3. 安装一些常用的 Webpack 插件:

    npm install --save-dev html-webpack-plugin clean-webpack-plugin babel-loader @babel/preset-env @babel/preset-typescript @babel/preset-react style-loader css-loader url-loader image-webpack-loader
    

步骤 3:配置 Webpack

  1. 在项目根目录创建一个名为 webpack.config.js 的文件,并添加以下内容:

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {entry: './src/index.tsx',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devtool: 'inline-source-map',devServer: {port: 8080, // you can change the porthot: true},resolve: {extensions: ['.ts', '.tsx', '.js']},module: {rules: [{test: /\.(ts|js)x?$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-env","@babel/preset-typescript","@babel/preset-react",],},},},{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/},{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: [{loader: "url-loader",options: {limit: 10000,name: "img/[name]_[hash:8].[ext]",},},{loader: "image-webpack-loader",options: {disable: true, // webpack@2.x and newer},},],},]},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: './public/index.html'})]
    };
    
  2. package.json 文件中添加以下脚本:

    "scripts": {"dev": "webpack serve --open --config webpack.config.js --mode development","build": "webpack --config webpack.config.js --mode production"
    }
    

步骤 4:更新 TypeScript 配置

  1. 创建一个 tsconfig.json 文件(如果 create-react-app 已经生成了一个,你可以根据需要进行修改):

    {"compilerOptions": {"target": "es5","lib": ["dom", "es2015"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": false,"jsx": "react-jsx"},"include": ["src"]
    }
    

步骤 5:启动开发服务器

  1. 运行以下命令启动开发服务器:

    npm run dev
    
  2. 访问浏览器中的 http://localhost:8080,你应该能看到你的 React 应用正在运行。

步骤 6:构建项目

  1. 运行以下命令构建项目:

    npm run build
    

构建后的文件将会放在 dist 目录中,你可以将其用于部署。

通过以上步骤,你已经成功创建了一个使用 TypeScript 的 React 项目,并使用 Webpack 进行构建和打包。

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

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

相关文章

【代码随想录算法训练Day43】LeetCode 518.零钱兑换II、LeetCode 377.组合总和IV、LeetCode 70.爬楼梯

Day43 动态规划第五天 LeetCode 518.零钱兑换II dp数组的含义:装满容量为j的背包有dp[j]种方法 递推公式:dp[j]dp[j-coins[i]]。 初始化:dp[0]1,dp[j]0 遍历顺序:先物品后背包,背包内从小到大 本题是组合数&#xff…

【Android面试八股文】你能讲一讲Kotlin语言泛型的形变是什么?

文章目录 1. 协变 (`out`)1.1 协变概念1.2 协变示例1.3 为什么协变只能读取泛型,而不能修改泛型?1. 原因概述2. 类型安全性问题3. 类型一致性结论2. 逆变 (`in`)2.1 逆变概念2.2 逆变示例2.3 为什么逆变只能修改泛型,不能读取泛型?2.3.1 为什么逆变只能读取泛型,不能修改泛…

吴恩达机器学习作业ex3:多类分类和前馈神经网络(Python实现)详细注释

文章目录 1 多类分类1.1数据集1.2 数据可视化1.3 向量化逻辑回归1.3.1 向量化代价函数1.3.2 矢量化梯度下降以及正则化表达1.4 一对多分类 2.神经网络2.1模型表示 总结(自己训练求解参数全流程) 1 多类分类 在本练习中,您将使用逻辑回归和神…

Redis学习|Jedis、SpringBoot整合Redis

Jedis 我们要使用Java 来操作 Redis,知其然并知其所以然,授人以渔!学习不能急躁,慢慢来会很快!什么是Jedis 是 Redis 官方推荐的java连接开发工具!使用java 操作Redis 中间件!如果你要使用 java操作redis,那么一定要对Jedis 十分的熟悉! 1、…

MySQL之复制(五)

复制 复制的原理 复制文件 3.master.info 这个文件用于保存备库连接到主库所需要的信息,格式为纯文本(每行一个值),不同的MySQL版本,其记录的信息也可能不同。此文件不能删除,否则备库在重启后无法连接到主库。这个文件以文本的…

电脑ffmpeg.dll丢失原因解析,找不到ffmpeg.dll的5种解决方法

在数字化时代,多媒体文件的处理已经成为我们日常生活和工作中不可或缺的一部分。在计算机使用过程中,丢失ffmpeg.dll文件是一个特定但常见的问题,尤其是对于那些经常处理视频编解码任务的用户来说。下面小编讲全面分析ffmpeg.dll丢失原因以及…

android webview调用js滚动到指定位置

一、activity import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.tencent.smtt.sdk.WebView import com.tencent.smtt.sdk.WebViewClientclass MainActivity : AppCompatActivity() {private lateinit var webView: WebViewoverride fun …

基于深度学习的图像去噪

基于深度学习的图像去噪 图像去噪是从受噪声污染的图像中恢复原始图像的过程。在传统方法中,常用的去噪技术包括均值滤波、中值滤波和维纳滤波等。随着深度学习技术的发展,基于深度学习的图像去噪方法取得了显著进展。 深度学习图像去噪方法 1. 卷积神…

Python数据分析与建模库之从入门到四大库(Numpy、Pandas、Matplotl、Seaborn )教学课程下载

第一阶段课程-Python快速入门: 含:1.系列课程环境配置;2.Python快速入门;3.变量类型;4.LIST基础;5.List索引;6.循环结构;7.判断结构;8.字典;9.文件处理&#…

哪些好用的AI绘画生成软件?建议你试试这四款

哪些好用的AI绘画生成软件?随着人工智能技术的飞速发展,AI绘画生成软件逐渐走入大众的视野,为艺术创作领域带来了革命性的变革。今天,就让我们一起探索四款备受推崇的AI绘画生成软件,看看它们如何以独特的魅力&#xf…

202483读书笔记|《牵牛花浮世无篱笆:千代尼俳句250》——被红叶染红的只有一侧山坡之山 啊,单恋

202483读书笔记|《牵牛花浮世无篱笆:千代尼俳句250》——被红叶染红的只有一侧山坡之山 啊,单恋 春之句夏之句秋之句冬之句 历史读过的俳句列表: 202318读书笔记|《芭蕉芜村一茶:俳句三圣新译300》——樱花——让一整个春夜亮起来&#xff0…

数据库相关-Spock

数据库相关-Spock ‍ Spock连接数据库 ‍ import com.alibaba.fastjson.JSON import com.google.common.reflect.TypeToken import com.meituan.mtrace.Tracer import com.sankuai.solarsystem.aigc.common.util.GsonUtil import com.sankuai.solarsystem.aigc.domain.assi…

目标检测讲解

环境准备 pip install scikit-image -i https://pypi.tuna.tsinghua.edu.cn/simple图片读取&画框 from skimage import io import matplotlib.pyplot as plt import matplotlib.patches as mpss io.imread(dogs.jpg)_, ax plt.subplots(ncols1, nrows1, figsize(6, 6))…

零编程数据可视化展示:十个简易案例!

数据可视化是呈现数据内在价值的最终手段。数据可视化实例利用各种图表和图形设计手段,合乎逻辑地展示复杂而不直观的数据。为了让用户直观清楚地了解他们想要的数据及其比较关系,数据可视化实例的呈现至关重要。即时设计整理了10个数据可视化实例&#…

C语言练习01-循环

一、打印五行五列的三角形 如下图&#xff1a; #include<stdio.h>int main() {for (int i 1;i < 5; i){for (int j i; j < 5; j){printf("*");}printf("\n");}return 0; }#include<stdio.h>int main() {for (int i 1;i < 5; i){f…

Java 开发面试题精选:RocketMQ 一篇全搞定

前言 RocketMQ作为一个高性能、高可用的分布式消息和流处理平台&#xff0c;广泛应用于分布式系统中的解耦、异步通信和数据流处理场景。这篇文章我精选了一些关于RockerMQ面试题目&#xff0c;这些问题涵盖了RocketMQ的所有关键知识点&#xff0c;从基本概念到高级应用&#…

leetcode21 合并两个有序单链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]示例…

QT的绘图框架

Qt 的绘图框架主要是建立在 QGraphicsView、QGraphicsScene 和 QGraphicsItem 三个核心类上的。这个框架提供了一种高级的图形视图框架&#xff0c;能够方便地进行图形绘制和交互。 QGraphicsView&#xff1a; QGraphicsView 是一个用于显示图形场景的窗口部件&#xff0c;可以…

压缩pdf文件大小,如何压缩pdf

压缩PDF文件是现代办公中常见的需求&#xff0c;因为PDF文件往往包含了大量的图片、文本和格式信息&#xff0c;导致文件体积较大&#xff0c;不利于传输和存储。本文将详细介绍如何压缩PDF文件&#xff0c;我们一起来看一下。 浏览器打开 "轻云处理pdf官网" &#x…

非递归式实现快速排序

快速排序基本思想是寻找一个元素作为基准&#xff0c;将其他元素划分为两部分&#xff0c;其中一部分比基准元素小&#xff0c;另一部分比基准元素大&#xff0c;然后如此继续对这两部分操作下去 快速排序最简单的实现就是通过简单的递归&#xff0c;实现方式之一是使用双指针…