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

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

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

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

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

    bash 复制代码
    npx create-react-app my-app --template typescript

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

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

  1. 进入项目目录:

    bash 复制代码
    cd my-app
  2. 安装 Webpack 和相关插件:

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

    bash 复制代码
    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 的文件,并添加以下内容:

    javascript 复制代码
    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 port
        hot: 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 文件中添加以下脚本:

    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 已经生成了一个,你可以根据需要进行修改):

    json 复制代码
    {
      "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. 运行以下命令启动开发服务器:

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

步骤 6:构建项目

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

    bash 复制代码
    npm run build

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

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

相关推荐
慧一居士29 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead31 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码8 小时前
1.
react.js·node.js·angular.js