react-demo项目:纯零搭建react项目（不用create-react-app脚手架）

HaanLen

已于 2022-11-25 18:11:25 修改

阅读量946

点赞数

分类专栏： React全家桶系列文章标签： react.js javascript webpack

于 2022-11-23 18:07:53 首次发布

本文链接：https://blog.csdn.net/weixin_40119412/article/details/128005161

版权

React全家桶系列专栏收录该内容

49 篇文章 13 订阅

订阅专栏

新建目录react-node-demo

react-node-demo下新建package.json文件

终端初始化，执行命令npm init

安装webpack相关依赖webpack webpack-cli webpack-dev-serve

npm i webpack webpack-cli webpack-dev-serve -save-dev

安装react依赖react react-dom

npm i react react-dom

项目下新建src目录

在src目录下新建App.jsx main.js index.html文件

App.jsx文件

import React from "react"

export default function App(props){
  return(
    <div>
      hello
    </div>
  )
}

main.js文件

import React from "react";
import ReactDOM from 'react-dom/client';

import App from './App.jsx';

ReactDOM.createRoot(
  document.getElementById('app')
).render(<App/>);

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

package.json文件配置

{
  "name": "react-node-demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --open --mode development",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "cross-env": "^7.0.3",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }
}

webpack.config.js文件配置

const path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:  path.resolve(__dirname,'./src/main.js'), //入口文件
  mode: 'development',
  output: {
    filename: 'bundle.js', //出口文件
    path: path.resolve(__dirname, 'dist')//打包输出目录
  },
  devServer: {
    port: 9000,//指定端口
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    },{
      test: /\.html$/,
      use: [
        {
          loader: 'html-loader'
        }
      ]
    }]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: './index.html'
    })
  ]
}

错误解决
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\目录\react-node-demo\src\main.js: Support for the experimental syntax ‘jsx’ isn’t currently enabled (8:10):

6 | ReactDOM.createRoot(
7 | document.getElementById(‘app’)
8 | ).render();

在项目目录下新建.babelrc.js文件

module.exports ={
  presets: [
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development",
      },
    ],
  ],
}

详细见babel:https://babeljs.io/docs/en/babel-preset-react.html

目录结构

react项目中使用css

安装依赖

npm i style-loader css-loader --save-dev

webpack.config.js配置

  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }]
  },

HaanLen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react-demo项目:纯零搭建react项目（不用create-react-app脚手架）

详细见babel:https://babeljs.io/docs/en/babel-preset-react.html。webpack.config.js文件配置。安装webpack相关依赖。终端初始化，执行命令。
复制链接

扫一扫