手动搭建一个react项目（不使用create-react-app脚手架）并更改默认端口

最新推荐文章于 2024-07-24 11:09:48 发布

郑敬儒~

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量1k

点赞数 2

分类专栏： React

本文链接：https://blog.csdn.net/qq_45830543/article/details/119107433

版权

React 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先，创建一个文件夹

1、使用`npm init -y` 命令生成`package.json`文件

2、安装所需要的依赖

npm install --save react (安装React)
npm install --save react-dom (安装React Dom)
npm install --save-dev webpack (安装webpack，打包工具)
npm install --save-dev webpack-cli (使用 webpack 4+ 版本，还需要安装 webpack-cli)
npm install --save-dev webpack-dev-server (安装webpack-dev-server，一个小型express服务器，主要特性是支持热加载)
npm install --save-dev html-webpack-plugin html-loader (webpack需要两个额外的插件来处理HTML：html-webpack-plugin和html-loader)

3、安装过webpack后需要修改 `package.json` 文件的内容

"scripts": {
    "start": "webpack server --open --mode development",
    "build": "webpack --mode production"
},

4、在根目录新建 `webpack.config.js` 文件，写入以下内容

const HtmlWebPackPlugin = require("html-webpack-plugin");
 
module.exports = {
    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"
        })
    ]
};

5、安装babel （babel是一个广泛使用的转码器，可以将es6代码转化为es5代码，从而在现有环境执行）

npm install --save-dev @babel/core
npm install --save-dev babel-loader (webpack并不知道如何将ES6语法转换为ES5，不过 webpack 可以使用 loader 来完成。即webpack加载器将一些东西作为输入，并将其转换为其他东西输出。)
npm install --save-dev @babel/preset-env (将ES6语法转码为ES5)
npm install --save-dev @babel/preset-react (将JSX语法转化为JavaScript)

6、在根目录新建一个配置文件`.babelrc`,写入以下内容

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

7、配置识别css（安装CSS加载器）

1、css加载器
npm install style-loader css-loader
2、less加载器
npm i less-loader less

8、在 `webpack.config.js`中添上以下内容

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

9、编写react组件

1、在根目录下新建一个 `index.html`,写入以下内容

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

2、在根目录下新建一个src文件夹，在src中新建一个`index.js`，写入以下内容

import React from 'react';
import ReactDom from 'react-dom';
 
import './css/app.css'
class App extends React.Component {
    render() {
        return (
            <div className='div1'>
               呼呼呼
            </div>
        )
    }
}
 
ReactDom.render(
    <App />,
    document.getElementById('app')
);

3、样式 css/app.css

在这里插入图片描述

运行npm start，即可看到：

在这里插入图片描述

运行npm run build,会出现一个dist/文件夹，是打包后的文件。

10、更改默认端口

在webpack配置文件 webpack.config.js中，加上以下代码：
由于我在此想更改的端口号是3000，所以就是port:3000，大家根据自己的情况更改即可。
在这里插入图片描述

11、添加对图片的支持

1、安装依赖

npm i url-loader file-loader

2、修改webpack

{
       test: /\.(png|jpg|gif|woff|svg|eot|ttf)$/,
       use: [{
                 loader: 'url-loader',
                 options: {
                 limit: 10000,
                 name: 'assets/[hash].[ext]',
                },
           }],
},