新建一个 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 进行构建和打包。

相关推荐
Tajang6 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多10 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL41 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李41 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
Never_Satisfied1 小时前
在JavaScript / HTML中,所有转义字符(字符实体)
html·转义字符·字符实体
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1237 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript