在前端开发中，React 是目前最流行的 JavaScript 库之一。create-react-app 是一个方便快速搭建 React 项目的脚手架工具，但是有时候我们需要更加自定义化的配置来适应特定需求，这时就需要手动搭建基于 webpack 的 React 项目。
准备工作
在开始前，请确保已经安装了 Node.js 和 npm（或者 yarn）。我们需要手动创建并配置项目文件，并使用到以下包：
- webpack：打包工具
- webpack-cli：webpack 命令行工具
- react：React 库
- react-dom：渲染 React 组件
- babel-loader：编译 ES6+ 语法和 JSX 语法
- @babel/core：Babel 核心库
- @babel/preset-env：转换 ES6+ 语法
- @babel/preset-react：转换 JSX 语法
可以使用以下命令进行安装：
npm install webpack webpack-cli react react-dom babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
创建项目文件
首先创建 package.json 文件，可以使用以下命令初始化：
npm init -y
然后创建以下文件夹：
src：存放源代码dist：存放打包后的代码
在 src 文件夹下创建 index.js 文件，作为入口文件。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
----- --- - -- -- -
------ -
-----
---------- -----------
------
-
-
-------------------- --- --------------------------------配置 webpack
在项目根目录下创建 webpack.config.js 文件，并填写以下配置：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------------
-------- -----------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-
-这个配置文件指定了入口文件为 index.js，输出文件名为 bundle.js，并且使用 babel-loader 对所有 .js 和 .jsx 文件进行编译。需要注意的是，exclude 选项可以排除不需要进行编译的文件，这里我们排除了 node_modules 目录。
添加 npm 脚本命令
在 package.json 文件中添加以下脚本命令：
{
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
}这两个命令分别用于开发环境和生产环境。start 命令使用 webpack-dev-server 来启动本地服务器，支持热更新和实时预览，而 build 命令用于打包生产环境代码。
运行项目
现在可以使用以下命令来运行项目：
npm run start
这将会启动本地服务器，并且在浏览器中打开地址 http://localhost:8080，你将会看到 "Hello, world!" 的输出。
如果需要打包生产环境代码，请使用以下命令：
npm run build
这将会生成一个名为 bundle.js 的文件，并存放在 dist 目录下。
结论
通过手动搭建基于 webpack 的 React 项目，我们可以更加灵活地配置和定制项目。以上是一个简单的示例，但是可以根据具体需求进行进一步扩展和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31923