如果不使用脚手架，如果用webpack构建一个自己的react应用

合集 - 前端小知识点(36)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01 8.如何实现网页加载进度条01-01 9.常见图片懒加载方式有哪些01-01 10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01 13.一直在window上面挂东西是否有什么风险01-01 14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01

16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01

17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01 18.package.json 里面 sideEffects 属性的作用01-01 19.script 标签上有那些属性01-01 20.SPA 中使用 hash 路由时作用和意义01-01 21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26 36.深度响应式劫持vue303-07

以下是使用Webpack构建一个自己的React应用的基本步骤：

1. 项目初始化

首先创建一个项目文件夹，并在其中初始化package.json文件（用于管理项目的依赖和脚本等），打开命令行，进入项目文件夹，执行以下命令：

mkdir my-react-app
cd my-react-app
npm init -y

2. 安装必要的依赖

需要安装React、React DOM以及Webpack相关的核心库和一些必要的加载器（loader）等。

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

react和react-dom：React核心库和用于操作DOM的库。
webpack和webpack-cli：构建工具及其命令行界面，用于打包项目。
webpack-dev-server：提供一个开发服务器，方便在开发过程中实时查看效果，热更新等。
html-webpack-plugin：用于自动生成HTML文件，并将打包后的JavaScript等资源引入到HTML中。
@babel/core、@babel/preset-env、@babel/preset-react和babel-loader：用于将ES6+代码（包括React的JSX语法）转换为浏览器能够识别的JavaScript代码，通过Babel进行转译。
css-loader和style-loader：用于处理CSS文件，css-loader解析CSS文件中的@import和url()等，style-loader将解析后的CSS样式注入到页面中。

3. 配置Webpack

在项目根目录下创建webpack.config.js文件，用于配置Webpack的各项参数，示例配置如下：

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

module.exports = {
  mode: 'development', // 开发模式，还可以设置为'production'用于生产环境打包
  entry: './src/index.js', // 项目入口文件，后续所有依赖会从这里开始分析和打包
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包后的文件输出目录
    filename: 'main.js' // 输出的主文件名
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // 处理.js和.jsx文件
        exclude: /node_modules/, // 排除node_modules文件夹中的文件，不进行转译处理
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
            ]
          }
        }
      },
      {
        test: /\.css$/, // 处理CSS文件
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定HTML模板文件，会基于这个文件生成最终的HTML
      inject: 'body' // 将打包后的JavaScript文件注入到HTML的body标签内
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 开发服务器的根目录，指向打包输出目录
    port: 3000, // 服务器监听的端口号
    open: true // 启动服务器时自动打开浏览器访问应用
  }
};

4. 创建项目文件

在项目根目录下创建src文件夹，里面包含以下几个关键文件：

index.html：作为HTML模板文件，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

index.js：这是项目的入口JavaScript文件，在这里引入React并渲染组件到页面上，示例如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 假设后续会创建App组件

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

App.js：一个简单的React组件文件，示例如下：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React App!</h1>
    </div>
  );
};

export default App;

5. 运行项目

在命令行中执行以下命令来启动开发服务器，Webpack会根据配置进行打包，并在浏览器中打开应用：

npx webpack-dev-server

如果后续想要进行生产环境的打包，可以执行以下命令（会根据webpack.config.js中的mode配置为production时的相关设置进行打包）：

npx webpack

通过以上步骤，就可以在不使用脚手架的情况下，利用Webpack构建一个简单的React应用，在开发过程中可以不断扩展组件、添加功能以及完善样式等。

posted @ 2025-01-01 18:38 jialiangzai 阅读(52) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

如果不使用脚手架，如果用webpack构建一个自己的react应用

1. 项目初始化

2. 安装必要的依赖

3. 配置Webpack

4. 创建项目文件

5. 运行项目

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏