webpack如何打包react
安装必要依赖
确保项目中已安装 React 和 React DOM，同时需要安装 Webpack 及其相关插件和加载器：
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
npm install css-loader style-loader html-webpack-plugin --save-dev配置 Webpack
创建 webpack.config.js 文件，配置入口、输出、加载器和插件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
port: 3000,
open: true,
},
};创建 Babel 配置
在项目根目录创建 .babelrc 文件，配置 Babel 预设：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}设置项目结构
确保项目结构如下：
project/
├── src/
│ ├── index.js
│ └── App.js
├── public/
│ └── index.html
├── webpack.config.js
└── package.json编写 React 入口文件
在 src/index.js 中引入 React 和根组件：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);创建 HTML 模板
在 public/index.html 中提供基础的 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React with Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>添加启动脚本
在 package.json 中添加 Webpack 开发服务器和构建脚本：
{
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
}运行项目
启动开发服务器：
npm start构建生产环境代码：
npm run build
