手动构建React工程项目（不借助脚手架）

最新推荐文章于 2025-06-13 11:33:00 发布

mr_cmx

最新推荐文章于 2025-06-13 11:33:00 发布

阅读量338

点赞数 9

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/weixin_44646763/article/details/145857677

版权

react 专栏收录该内容

1 篇文章

订阅专栏

1、初始化项目

 npm init -y

2、安装依赖

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react ts-loader

3、构建项目结构

在这里插入图片描述

4、内容开发

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'), // 指向你的index.html模板
      filename: 'index.html', // 输出的html文件名
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'), // 这里可以保留，devServer会服务这个文件夹
    },
    compress: true,
    port: 3000,
  },
};

index.tsx：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

App.tsx：

import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>

package.json

package.json添加scripts指令

"scripts": {
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },

5、运行

运行项目npm run start
在这里插入图片描述
打包项目npm run build