以下是使用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模板文件，会基于这个文件生成最终的HTMLinject: '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应用，在开发过程中可以不断扩展组件、添加功能以及完善样式等。
![[Windows] 启动 Windows Update 服务失败，报:Windows 无法启动 Windows Update 服务(位于 本地计算机 上) 错误 126:找不到指定的模块](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
