从零开始手动搭建react项目小记，告别脚手架

最新推荐文章于 2024-05-06 19:01:25 发布

aMeiHui

最新推荐文章于 2024-05-06 19:01:25 发布

阅读量684

点赞数

文章标签： react 项目架构

本文链接：https://blog.csdn.net/aMeiHui/article/details/109118135

版权

博主分享了自己手动创建React项目的过程，包括创建文件夹、安装依赖、配置webpack和启动项目。在实践中遇到webpack5.x与webpack-dev-server3.x的兼容问题，解决后成功启动了一个最小化的React项目。此博文旨在梳理思路并记录搭建过程，便于日后快速创建新项目。

摘要由CSDN通过智能技术生成

脚手架工具 react-create-app尽管简单，但是搭建出来的项目太大，如果是小型项目，自己手动搭建反而更好，自主性强，我也更喜欢这种完全掌控整个项目的感觉，奈何从业以来，绝大部分时间都是负责迭代开发的工作，读那些老祖宗代码就够眼疼了，还要时不时去看下，是不是有一些不必要的组件、配置、代码。。。。。真心累，两个项目迭代工作刚结束，后期还没有开始，prd也在等待中，闲来无事，打算自己搭建一个完全属于自己的react项目，以后研究各类js库的时候可以直接引入到自己的项目里面，搭建过程中居然还遇到了一些奇怪的坑，webpack5.x版本与webpack-dev-server3.x版本居然是不兼容的，项目启动会报错，为此耽误了好一会功夫，简单记录一下项目搭建过程，也顺便梳理一下思路，后期打算自己写个脚本来直接生成小react项目。

具体实施情况

1、创建初始文件夹 demo，并初始化

mkdir demo // 创建 demo文件夹
cd demo    // 进入 demo文件夹
npm init    //初始化 demo文件夹，根目录中会出现 package.json的文件

2、安装项目必要依赖

npm i webpack@4 webpack-cli@3 webpack-dev-server@3 --save-dev // 亲测此搭配无兼容问题 其他搭配可能出现呢不兼容问题
npm i react react-dom -save
npm i @babel/core babel-loader@8 @babel/preset-env html-loader @babel/preset-react html-webpack-plugin -D

3、创建配置文件 webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "./index.html"
    })
  ],
  devServer: {
    port: 4000, // 项目启动端口号为4000
    contentBase: path.join(__dirname, 'build'), 
    progress: true, // 显示打包进度条
    open: true, // 启动后自动打开浏览器
  },
  entry: path.join(__dirname, 'src', 'page', 'app', 'index.jsx'), // 入口文件地址
  output: {
    path: path.join(__dirname, 'build'), // 打包后文件输出地址
    filename: 'bundle.js'
  },
  module: { // 设置各类文件解析文件
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
            loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
},
}

4、根目录下创建 index.html 入口文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

5、根目录创建 src文件夹，并在src文件夹下创建page文件夹，page文件夹内创建app文件夹，并创建 index.jsx文件，文件内容如下：

import React from 'react';
import ReactDom from 'react-dom';
 
class App extends React.Component {
  render() {
    return (
      <h1>
        Hello World !
      </h1>
    )
  }
}
 
ReactDom.render(
  <App />,
  document.getElementById('app')
);

6、在package.json文件中配置scripts

"scripts": {
    "start": "webpack-dev-server --hot --open --mode development",
    "bulid": "webpack-dev-server"
  },

7、控制台 npm start 就可以启动一个最小化的react的项目了

aMeiHui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
从零开始手动搭建react项目小记，告别脚手架

脚手架工具 react-create-app尽管简单，但是搭建出来的项目太大，如果是小型项目，自己手动搭建反而更好，自主性强，我也更喜欢这种完全掌控整个项目的感觉，奈何从业以来，绝大部分时间都是负责迭代开发的工作，读那些老祖宗代码就够眼疼了，还要时不时去看下，是不是有一些不必要的组件、配置、代码。。。。。真心累，两个项目迭代工作刚结束，后期还没有开始，prd也在等待中，闲来无事，打算自己搭建一个完全属于自己的react项目，以后研究各类js库的时候可以直接引入到自己的项目里面，搭建过程中居然还...
复制链接

扫一扫