首页 > 资讯 > 前端开发 > JavaScript >webpack5搭建一个简易的react脚手架项目实践

141

分享到

webpack5搭建一个简易的react脚手架项目实践

2024-04-02 19:04:59 141人浏览八月长安

摘要

目录项目初始化安装webpack搭建脚手架目录结构开启本地服务配置CSS&sass安装React的相关依赖项目添加热更新生产环境打包总结项目初始化首先我们创建一个目录，初始

项目初始化

首先我们创建一个目录，初始化 npm,得到一个package.json文件。

mkdir react-cli
cd react-cli
npm init -y

安装WEBpack

安装webpack和相关依赖。webpack-dev-server是开启开发环境的服务，webpack-merge是合并公共配置文件。

npm install webpack webpack-cli webpack-dev-server webpack-merge -D

这个时候得到以下结构

 react-cli
  |- node_modules
  |- package.JSON
  |- package-lock.json

搭建脚手架目录结构

现在，我们将创建以下目录结构、文件和内容：

 react-cli
  |- node_modules
  |- package.json
  |- package-lock.json
+ |- public
+   |- index.html        //入口文件
+ |- src
+   |- App.js
+   |- index.css    
+   |- App.scss           //测试sass
+   |- index.js
+ |- webpack.common.js    //开发和生产环境的公共配置
+ |- webpack.prod.js      //开发环境的配置
+ |- webpack.dev.js       //生产环境的配置

public的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>react-cli</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src的index.js的内容如下：

const root = document.getElementById("root");
root.innerHTML = "cks";

开启本地服务

我们先安装html-webpack-plugin。该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

npm i html-webpack-plugin -D
复制代码

webpack.common.js的公共配置如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

webpack.dev.js的配置如下,我们使用webpack-merge进行合并公共配置：

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
  mode: "development",   //开发环境
  devtool: "inline-source-map"  //可以查看代码报错的位置
});

修改package.json文件，加上dev命令。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js"
  },

然后控制台npm run dev回车，打开http://localhost:8080 ，如果页面出现cks证明开启本地服务成功，更多详细配置查看webpack官网 webpack.docschina.org/guides/ 。

配置css&sass

我们安装样式文件相关的loader，在webpack 5 中，可以使用内置的Asset Modules处理图像和字体，我们不用额外安装。

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

修改webpack.commmon.js文件：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  module: {
    rules: [
      {
        test: /css$/i,    //匹配css、scss文件
        use: ["style-loader", "css-loader", "sass-loader"] // 注意执行顺序是后往前
      },
      {
        test: /.(png|jpg|jpeg|svg|gif)$/i,
        type: "asset/resource"
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

这样css和sass的样式文件就能使用了。

安装react的相关依赖

我们要在生产环境安装react和react-dom，因为react的编译依赖babel，我们也安装babel相关的依赖。babel主要是以下这些：

"babel-loader": 转义 js 文件代码的 loader
"@babel/core": babel 核心库
"@babel/preset-env": es6转ES5
"@babel/preset-react": 转换 JSX 为函数

npm install --save react react-dom

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

修改webpack.common.js文件,添加babel的loader，当然也可以使用配置文件.babelrc的形式。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
  },
  resolve: {
    extensions: [".js", ".json", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /css$/i,
        use: ["style-loader", "css-loader", "sass-loader"] // 注意执行顺序是后往前
      },
      {
        test: /.(png|jpg|jpeg|svg|gif)$/i,
        type: "asset/resource"
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource"
      },
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  }
};

然后我们在src的index.js中导入的App组件，将组件渲染到页面。因为我是安装的是React18, React 18 不再支持 ReactDOM.render，改用 createRoot。更多请查看reactjs.org/link/switch…, 我们修改index.js的代码为：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use typescript
root.render(<App />);

浏览器打开http://localhost:8080/ 得到以下内容证明添加react成功了。

项目添加热更新

HMR 全称为 Hot Module Replacement ，中文意思为热模块替换。是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。如下开启热模块替换：

  devServer: {
     hot: true,
  }

上面那个是默认开启的，我们就不配置了，但是设置那个只是样式文件进行了热更新，我们的jsx或者js修改还是重新刷新的。所以我们要修改src的index.js文件进行react的热更新。

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

// 如果启动webpack热更新，则会执行一下代码
if (module.hot) {
  module.hot.accept("./App.js", () => {
    const NextApp = require("./App.js").default;
    // 再次挂在到dom元素上
    root.render(<NextApp />)
  })
}

生产环境打包

我们为webpack.prod.js添加以下代码进行简单打包。更多打包优化查看webpack.docschina.org/guides/

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
module.exports = merge(baseConfig, {
  mode: "development",   //开启生产环境
  output: {
    clean: true   // webpack5的新特性，在生成文件之前清空 output 目录
  }
});

同时修改package.json文件代码，添加打包命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }

然后npm run build打包。

总结

以上就是webpack5搭建一个简易的react脚手架项目的大概流程，并总结一些webpack5的新特性，后面我将总结一下webpack的打包优化。

项目地址：https://gitee.com/chen-kangsen/react-cli

到此这篇关于webpack5搭建一个简易的react脚手架项目实践的文章就介绍到这了,更多相关webpack5搭建react脚手架内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: webpack5搭建一个简易的react脚手架项目实践

本文链接: https://www.lsjlt.com/news/148261.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

webpack5搭建一个简易的react脚手架项目实践

目录项目初始化安装webpack搭建脚手架目录结构开启本地服务配置css&sass安装react的相关依赖项目添加热更新生产环境打包总结项目初始化首先我们创建一个目录，初始...

99+

2024-04-02
从零搭建Webpack5-react脚手架的实现步骤(附源码)

目录webpack5 正式开始搭建指南开始搭建完成了依赖的准备工作,开始搭建项目编写webpack.dev.js开发配置开始编写webpack.prod.js生产配置编写scri...

99+

2024-04-02
VUE实现一个简易老虎机的项目实践

目录简单分析下先看看效果htmljs部分总结今天突然要做一个竖直滚动老虎机，可以设置中奖位置，以及中奖回调，然后再带点常规的滚动动画，还是有点意思，和之前的转盘抽奖有点类似，有兴趣可...

99+

2024-04-02
搭建一个基础的Resty项目框架

目录1.RestFilter2.Config3.resources4.编写一个Resource一个Resty项目包含的部分(resty-route)： 1. RestFilter 像...

99+

2024-04-02
React Native项目框架搭建的一些心得体会

React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架, 短短的一两年的发展就已经有很多家公司支持并采用此框架来搭建公司的移动端的应用, React...

99+

2024-04-02
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

目录写在前面创建Vue3项目开发规范 Vite配置别名配置环境变量 .env文件定义环境变量在vite.config.ts中获取环境变量自动导入NaiveUI的安装写...

99+

2024-04-02
Vue脚手架搭建及创建Vue项目流程的详细教程

目录VUE脚手架搭建流程安装国内淘宝镜像安装 Vue 脚手架Vue项目创建项目结构解读项目修改测试总结VUE脚手架搭建流程 1.安装 Node.js(推荐一个网站：http://no...

99+

2024-04-02
手把手教你搭建一个vue项目的完整步骤

目录一、环境准备1、安装node.js2、检查node.js版本3、为了提高我们的效率，可以使用淘宝的镜像源二、搭建vue环境1、全局安装vue-cli三、创建vue项目1、用cmd...

99+

2024-04-02
Java中如何快速构建项目脚手架的实现

目录1 前言2 微服务项目准备3 脚手架构建3.1 项目正常启动 && 测试用例正常3.2 在项目的根pom中加入以下maven插件配置3.3 执行archetype...

99+

2024-04-02
使用nodejs搭建一个简易HTTP服务的实现示例

目录先搭建一个简单的HTTP服务根据不同的请求地址返回不同的信息获取请求参数实现服务端设置（跨域）cookie和读取客户端发送的cookie本文只使用nodejs的http模块搭建一...

99+

2024-04-02
【JavaScript】3.1 项目实践：制作一个简单的网页应用

文章目录项目需求HTML结构JavaScript逻辑添加待办事项标记待办事项删除待办事项保存待办事项总结在此章节中，我们将学习如何使用JavaScript创建一个简单的网页应用。这将是一个待办事项列表应用，用户可...

99+

2023-12-23

JavaScript JS 项目实战简单网页
聊聊UniApp构建一个项目的流程和最佳实践

最近，UniApp作为一种跨平台开发框架，备受开发者青睐，被广泛应用到了App的开发中。UniApp是由DCloud团队推出的一款基于Vue.js框架和微信小程序语法的跨平台应用开发框架，开发者可以使用它开发出同时支持Android、iOS...

99+

2023-05-14
如何使用Vue3+Vite+TS快速搭建一套实用的脚手架

目录前言技术栈开始构建1. 初始化项目2. 代码校验3.代码格式化4.配置路由5.配置状态管理器6.element-plus7.封装axios8.mockjs9.css预处理结语前言...

99+

2022-11-13

vue3 vite ts搭建脚手架 vue3的脚手架 vue3.0搭建脚手架
项目实践：如何运用CSS框架快速搭建网页的经验总结

项目实践：如何运用CSS框架快速搭建网页的经验总结在当今的互联网时代，网页已经成为我们日常生活和工作中不可或缺的一部分。而要快速、高效地搭建网页，CSS框架被广泛运用。本文将分享一些经验总结，帮助大家更好地运用CSS框架来快速搭建网页。一、...

99+

2023-11-02

快速搭建经验总结 CSS框架
Node.js Promises 项目实战：从零开始构建一个简单的 HTTP 应用程序

Node.js Promises 项目实战 1. 环境搭建首先，我们需要安装 Node.js 和必要的 npm 模块。在您的终端中运行以下命令： npm install -g nodejs npm install express bod...

99+

2024-02-13

Node.js Promises HTTP GET POST express body-parser