搭建 React + Webpack 项目，两种大型工程实现方案比较-JavaScript中文网-JavaScript教程资源分享门户

React是一个非常流行的Javascript库，它的高度组件化特性、高度可靠及更为高效的虚拟Dom机制让Web开发更加容易、简单，同时也能在很多方面上提升用户体验。同时，Webpack是一个非常强大的构建工具，能够实现模块化打包，优化性能，自动化处理等等。本文介绍搭建React + Webpack项目的两种方式，并分析它们之间的区别，以及如何在开发中正确使用。

方案一：Create-React-App脚手架搭建项目

Create-React-App是一个React官方提供的项目脚手架，可以快速生成一个React应用程序的基本结构。

步骤

安装Create-React-App
```
$ npm install -g create-react-app
```

创建项目

$ create-react-app my-app
$ cd my-app
$ npm start

优点

快速搭建
自动配置Webpack
开箱即用

缺点

难以定制
难以配置第三方库

方案二：手动搭建React + Webpack项目

手动搭建React + Webpack项目，需要了解Webpack的基础概念和使用方法，比较适合有一定Web开发经验的开发人员。

步骤

初始化项目

$ mkdir my-app && cd my-app
$ npm init -y

安装React和React-DOM
```
$ npm install react react-dom
```

安装Webpack和相关插件

$ npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react -D

创建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|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/preset-react'] }
},
{
test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
};

创建入口文件index.js和HTML文件

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

启动开发服务器
```
$ npx webpack-dev-server
```

优点

定制性高
可以选择使用第三方库

缺点

需要手动配置
知识门槛较高

总结

通过对比Create-React-App和手动搭建两种React + Webpack项目的方式，可以发现它们各有优缺点。如果需要快速搭建项目并且不需要特别定制和配置，可以选择Create-React-App；如果需要更大的定制和配置，需要手动搭建React + Webpack项目。在开发实践中，开发人员应该根据项目的实际情况选择更合适的方案。

完整示例代码见：https://github.com/ygmjzs/my-react-app。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659e8a49add4f0e0ff772329

搭建 React + Webpack 项目，两种大型工程实现方案比较

方案一：Create-React-App脚手架搭建项目

步骤

优点

缺点

方案二：手动搭建React + Webpack项目

步骤

优点

缺点

总结

纠错反馈