【学习】从零搭建react项目(简易版)

最新推荐文章于 2024-06-11 11:15:33 发布

破浪前行·吴

最新推荐文章于 2024-06-11 11:15:33 发布

阅读量973

点赞数 30

文章标签： javascript 学习 react.js webpack

本文链接：https://blog.csdn.net/m0_61097007/article/details/138579258

版权

前言

在日常工作中，我大多是在已有的项目基础上进行开发，而非从头构建项目。因此，我期望通过本次学习能填补我在项目初始化阶段知识的空白，与大家共同进步。在此过程中，我欢迎并感激任何指正或建议，无论是关于错误修正还是更优的解决策略，让我们相互促进，共同提升。
在我们正式开发之前，请确认您的计算机已安装Node.js环境，这是进行后续任务的前提。如未安装，请访问Node.js官网(https://nodejs.org/)，根据您的操作系统挑选并安装最新版本。安装完毕后，通过在命令行界面分别执行node -v和npm -v命令，来检验Node.js及配套的npm（Node Package Manager）是否安装成功。若两命令均返回相应的版本号，即表明Node.js环境已准备就绪，包括npm，为接下来的开发工作奠定了基础。

项目搭建

1. 项目初始化命令如下：

npm init -y

初始化成功之后会得到一个package.json文件。阅读 npm 文档以了解有关 package.json 内在机制的更多信息。

2. 安装react，react-dom命令如下：

npm install react react-dom

3. 在根目录创建src目录，并在目录下创建index.jsx,App.jsx文件

// App.jsx
import React from "react";

export const App = () => {
  return <div>app</div>;
};

// index.jsx
import React from "react";
import ReactDom from "react-dom/client";
import { App } from "./App";
const root = ReactDom.createRoot(document.getElementById("root"));
root.render(<App />);

4. 安装webpack，webpack-cli

点击此处了解webpack概念。
webpack 用于编译 JavaScript 模块。一旦完成安装就可以通过 webpack CLI 或 API 与其配合交互。
webpack-cli此工具用于在命令行中运行 webpack。

npm install webpack webpack-cli --save-dev

安装一个将被打包到生产环境 bundle 的包时，应该使用 npm install --save；而安装一个用于开发环境的包时（例如代码检查工具、测试库等），应该使用 npm install --save-dev。请查看 npm 文档以了解更多相关信息。

5. 在根目录创建scripts

scripts存放webpack配置文件
在scripts目录下创建webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: {// 入口
    index: "./src/index.jsx",
  },
  output: {// 输出
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

6. webpack loader属性

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

安装babel-loader @babel/core @babel/preset-env @babel/preset-react
babel-loader 使用 Babel 加载 ES2015+ 代码并将其转换为 ES5

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

修改webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    // 入口
    index: "./src/index.jsx",
  },
  output: {
    // 输出
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "../dist"),
    clean: true,
  },
  resolve: {
    extensions: [".mjs", ".js", ".json", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /.jsx$/,
        include: [path.resolve(__dirname, "../src")],
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  useBuiltIns: "usage", // 自动加载，按需引入
                  corejs: { version: "3", proposals: true },
                },
              ],
              "@babel/preset-react",
            ],
          },
        },
      },
    ],
  },
};

执行webpack打包命令

npx webpack --config .\scripts\webpack.config.js

执行成功会在根目录下生成dist目录，此时目录下只有js文件。
可以在dist目录下创建index.html文件如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.bundle.js"></script>
  </body>
</html>

用浏览器打开之后就可以看到信息了

7. 加载css

要想在 JavaScript 模块中导入 CSS 文件，需要安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader：

安装

npm install --save-dev style-loader css-loader

webpack.config.js

module.exports = {
 // ...
  module: {
    rules: [
     // ...
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

.hello {
    color: red;
}

在App.jsx中引入

import React from "react";
import "./app.css"

export const App = () => {
  return <div className="hello">app</div>;
};

执行打包命令，执行成功之后再次打开index.html（应该会被删掉需要手动再次创建，也可以修改webpack output 配置项）文件，发现文字变红

8. 加载less文件

less-loader:webpack 将 Less 编译为 CSS 的 loader。

安装

npm install less less-loader --save-dev

将本 loader 添加到 Webpack 配置中

module.exports = {
 // ...
  module: {
    rules: [
     // ...
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

@size: 60px;

.fs60 {
  font-size: @size;
}

在App.jsx文件中引入

import React from "react";
import "./app.css"
import "./app.less"

export const App = () => {
  return <div className="hello fs60">app</div>;
};

执行打包命令，用浏览器打开index.html应该可以看到字体放大了

9. 加载图像

webpack.config.js

module.exports = {
 // ...
  module: {
    rules: [
     // ...
      {
        test: /.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
      },
    ],
  },
};

在src目录下加入图片并在App.jsx中引入。

import React from "react";
import "./app.css";
import "./app.less";
import icon from "./icon.png";

export const App = () => {
  return (
    <div className="hello fs60">
      app
      <img src={icon} />
    </div>
  );
};

执行打包命令，dist目录下会出现一张图片，用浏览器打开index.html就可以看到这张图片了

10. HtmlWebpackPlugin

如果更改入口起点的名称，或者添加一个新的入口起点，那么会在构建时重新命名生成的 bundle，而 index.html 仍然在引用旧的名称。使用HtmlWebpackPlugin 插件可以解决这个问题。

安装

npm install --save-dev html-webpack-plugin

在根目录下创建public目录，在该目录下创建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>从零开始搭建react项目</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

webpack.config.js

// ...
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 // ...
 plugins: [
    new HtmlWebpackPlugin({
     template:path.resolve(__dirname,"../public/index.html")
    }),
  ],
};

执行打包命令，打开 dist目录下 index.html 会发现 HtmlWebpackPlugin 创建了一个全新的文件，而所有的 bundle 都已自动添加到其中。

11. 开发环境

首先将 mode 设置为 ‘development’ （已经设置过了）
使用 source map点击前去了解
webpack.config.js

 module.exports = {
  // ...
  devtool: 'inline-source-map',
 };

使用 webpack-dev-server
webpack-dev-server 提供了一个能够实时重新加载的基本的 web server。安装依赖如下：

npm install --save-dev webpack-dev-server

webpack.config.js

module.exports = {
  // ...
  devServer: {
    port: 8001,
    hot: true,
    open: true,
  },
 };

执行命令

npx webpack serve --config .\scripts\webpack.config.js

会看到浏览器自动加载页面。更改任何源文件并保存它们，web server 将在编译代码后自动重新加载。

总结

本次搭建参考webpack官网指南,本文如有错误欢迎指出。

破浪前行·吴

关注

30
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
【学习】从零搭建react项目(简易版)

在日常工作中，我大多是在已有的项目基础上进行开发，而非从头构建项目。因此，我期望通过本次学习能填补我在项目初始化阶段知识的空白，与大家共同进步。在此过程中，我欢迎并感激任何指正或建议，无论是关于错误修正还是更优的解决策略，让我们相互促进，共同提升。在我们正式开发之前，请确认您的计算机已安装Node.js环境，这是进行后续任务的前提。如未安装，请访问Node.js官网(https://nodejs.org/)，根据您的操作系统挑选并安装最新版本。安装完毕后，通过在命令行界面分别执行node -v和。
复制链接

扫一扫