以下是使用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应用，在开发过程中可以不断扩展组件、添加功能以及完善样式等。
标签：React,文件,babel,loader,react,webpack,脚手架 From： https://www.cnblogs.com/zsnhweb/p/18646179