手动使用Webpack构建React应用步骤
2025/3/4
本文详细介绍了不使用脚手架，手动用Webpack构建React应用的步骤，包括初始化项目、安装依赖、配置Babel和Webpack等，帮助读者深入理解现代前端工具链的工作原理。
不使用脚手架，手动使用 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
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin css-loader style-loader
3. 配置 Babel
Babel 用于将 JSX 和 ES6+ 代码转换为浏览器兼容的 JavaScript。在项目根目录下创建 .babelrc 文件，并添加以下配置：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
4. 配置 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$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
},
};
5. 创建项目结构
创建以下目录和文件：
my-react-app/
├── public/
│ └── index.html
├── src/
│ ├── index.js
│ └── App.js
├── .babelrc
├── package.json
└── webpack.config.js
在 public/index.html 中添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在 src/index.js 中添加以下内容：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
在 src/App.js 中添加以下内容：
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
);
}
export default App;
6. 添加 CSS 文件
在 src/App.css 中添加一些简单的样式：
.App {
text-align: center;
margin-top: 50px;
}
7. 配置脚本
在 package.json 中添加以下脚本：
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
8. 运行项目
现在，你可以运行以下命令来启动开发服务器：
npm start
打开浏览器并访问 http://localhost:3000，你应该会看到 “Hello, React!” 的页面。
9. 构建生产版本
当你准备好发布应用时，可以运行以下命令来构建生产版本：
npm run build
构建后的文件将位于 dist 目录中。
总结
通过以上步骤，你已经成功手动配置了一个基于 Webpack 的 React 应用。这个过程虽然比使用脚手架复杂，但它帮助你理解了 Webpack、Babel 和其他工具的工作原理，为你未来的项目打下了坚实的基础。