不使用脚手架创建一个react+typescript+webpack项目

大喜xi

已于 2024-03-24 20:35:03 修改

阅读量488

点赞数 5

文章标签： react.js typescript webpack

于 2024-03-24 18:58:32 首次发布

本文链接：https://blog.csdn.net/angelQin0704/article/details/136992704

版权

本文详细指导了如何从头开始创建一个使用React、TypeScript和Webpack的项目，包括初始化文件结构、配置package.json、安装依赖、设置TypeScript编译和Webpack打包配置，以及启动开发服务器。

摘要由CSDN通过智能技术生成

1.创建一个新的文件夹并进入该文件夹

mkdir my-react-ts-webpack-app
cd my-react-ts-webpack-app

2. 创建一个package.json

npm init -y

3. 安装React和TypeScript相关依赖

npm install --save react react-dom
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

4. 创建一个tsconfig.json文件来配置TypeScript编译器：

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

5. 创建一个webpack.config.js文件并配置Webpack

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

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './dist/index.html', // 指定一个HTML模板文件
      filename: 'index.html', // 输出的HTML文件名，默认是index.html
      inject: true, // 允许插件修改哪些内容，true将脚本添加到body元素的末尾
      // 其他插件选项...
    }),
    // 其他插件...
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
  },
  mode: 'development'
};

6. 安装Webpack和Babel依赖

npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev clean-webpack-plugin

7. 创建Babel配置文件.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

8. 创建一个HTML模板文件index.html并放入dist目录

<!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>
</body>
</html>

9. 在项目根目录创建一个webpack服务的入口文件，例如server.js

const path = require('path');
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
  contentBase: path.resolve(__dirname, 'dist'),
  publicPath: config.output.publicPath,
  hot: true,
  compress: true,
  port: 8080, 
});

server.listen(8080, 'localhost', (err) => {
  if (err) {
    return console.error(err);
  }
  console.log('Listening at http://localhost:8080');
});

10. 创建一个名为src的文件夹，并在其中创建index.tsx文件作为项目的TypeScript入口点

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

// 获取根DOM元素
const container = document.getElementById('root');

// 使用 createRoot 创建一个根
if(container) {
  const root = createRoot(container);
  // 使用根的 render 方法来渲染应用
  root.render(<App />);
}

11. 在src文件夹中创建一个App.tsx文件作为React组件的起点

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React + TypeScript!</h1>
    </div>
  );
}

export default App;

12. 启动项目

配置package.json 或 npx webpack serve --config webpack.config.js

大喜xi

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
不使用脚手架创建一个react+typescript+webpack项目

filename: 'index.html', // 输出的HTML文件名，默认是index.html。inject: true, // 允许插件修改哪些内容，true将脚本添加到body元素的末尾。template: './dist/index.html', // 指定一个HTML模板文件。5. 创建一个webpack.config.js文件并配置Webpack。8. 创建一个HTML模板文件index.html并放入dist目录。// 其他插件选项...// 其他插件...
复制链接

扫一扫