不用 create-react-app 搭建基于 webpack 的 React 项目

在前端开发中，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 语法

可以使用以下命令进行安装：

--- ------- ------- ----------- ----- --------- ------------ ----------- ----------------- ------------------- ----------

创建项目文件

首先创建 package.json 文件，可以使用以下命令初始化：

--- ---- --

然后创建以下文件夹：

src：存放源代码
dist：存放打包后的代码

在 src 文件夹下创建 index.js 文件，作为入口文件。示例代码如下：

------ ----- ---- -------
------ -------- ---- -----------

----- --- - -- -- -
  ------ -
    -----
      ---------- -----------
    ------
  -
-

-------------------- --- --------------------------------

配置 webpack

在项目根目录下创建 webpack.config.js 文件，并填写以下配置：

----- ---- - ---------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  ------- -
    ------ -
      -
        ----- --------------
        -------- -----------------
        ---- -
          ------- ---------------
          -------- -
            -------- --------------------- ----------------------
          -
        -
      -
    -
  -
-

这个配置文件指定了入口文件为 index.js，输出文件名为 bundle.js，并且使用 babel-loader 对所有 .js 和 .jsx 文件进行编译。需要注意的是，exclude 选项可以排除不需要进行编译的文件，这里我们排除了 node_modules 目录。

添加 npm 脚本命令

在 package.json 文件中添加以下脚本命令：

-
  ---------- -
    -------- -------- ----- ------ -------------
    -------- -------- ------ -----------
  -
-

这两个命令分别用于开发环境和生产环境。start 命令使用 webpack-dev-server 来启动本地服务器，支持热更新和实时预览，而 build 命令用于打包生产环境代码。

运行项目

现在可以使用以下命令来运行项目：

--- --- -----

这将会启动本地服务器，并且在浏览器中打开地址 http://localhost:8080，你将会看到 "Hello, world!" 的输出。

如果需要打包生产环境代码，请使用以下命令：

--- --- -----

这将会生成一个名为 bundle.js 的文件，并存放在 dist 目录下。

结论

通过手动搭建基于 webpack 的 React 项目，我们可以更加灵活地配置和定制项目。以上是一个简单的示例，但是可以根据具体需求进行进一步扩展和优化。

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

不用create-react-app搭建基于webpack的react项目