webpack5搭建一个简易的react脚手架项目实践
目录
- 项目初始化
- 安装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脚手架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
React脚手架搭建的学习
一.前端工程的复杂化 如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分:比如如何管理文件之间的相互依赖:比如如何管理第三方模块的依赖:比如项目发布前如何压缩.打包项目:等等- 现代的前端项目已经越来越复杂了: 不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单: 比如css可能是使用less.sass等预处理器进行编写,我们需要将它们转成普通的css才能被浏览器解析: 比如JavaScript代码不再只是编
-
如何解决React官方脚手架不支持Less的问题(小结)
说在前面 create-react-app是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言Less的.如果我们的项目必须要使用 Less 呢,这就需要我们手动集成一下.本篇主要针对集成的过程做一个简要记录. 环境准备 本小节先用 create-react-app 构建一个全新的 React 项目作为实验环境. 如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您
-
react脚手架配置路径别名的方法
文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'reac
-
从零开始学习搭建React脚手架项目
写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架.这大大方便了我们的开发.react的脚手架是create-react-app. 脚手架下载 使用npm下载create-react-app运行如下命令: npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可
-
webpack+react+antd脚手架优化的方法
在之前的文章中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化. 优化类目 样式分离 第三方资源分离 区分开发环境 热更新 提取公共代码 1. CSS分离 npm install extract-text-webpack-plugin -D webpack.config.js 将css.less.sass文件单独从打包文件中分离 + let cssExtract = new ExtractTextWebpackPlugin({ + filen
-
React大屏可视化脚手架教程示例
目录 使用 create-react-app 初始化 引入 antd UI库 使用 craco 插件来自定义配置 自定义 antd 主题,使用 less 作为 css 预处理器 修改 craco.config.js 文件 craco-less .module.less 模拟vue组件中style的scope 功能 配置 craco.config.js 文件 以上操作版本记录 使用 create-react-app 初始化 # 使用了 create-react-app 的 typescript 模
-
webpack5搭建一个简易的react脚手架项目实践
目录 项目初始化 安装webpack 搭建脚手架目录结构 开启本地服务 配置css&sass 安装react的相关依赖 项目添加热更新 生产环境打包 总结 项目初始化 首先我们创建一个目录,初始化 npm,得到一个package.json文件. mkdir react-cli cd react-cli npm init -y 安装webpack 安装webpack和相关依赖.webpack-dev-server是开启开发环境的服务,webpack-merge是合并公共配置文件. npm inst
-
使用node-media-server搭建一个简易的流媒体服务器
记录一下使用node-media-server的一些过程.本文章环境为windows.本文章适合初学者. 使用到的东西:nodeJs.ffmpeg.node-media-server. 这里说一点(如果有错欢迎指出): node-media-server是作为流媒体服务器,你可以把他理解为中转站,用于转换流格式或者对视频流做一些操作以及向外推送流地址. ffmpeg是作为推流工具,将你需要转换的视频或者视频流推流到流媒体服务器中. 拉流的意思是从流媒体服务器上拉去视频流,观看者通过拉取流媒体服务
-
使用mpvue搭建一个初始小程序及项目配置方法
1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sud
-
c++实现一个简易的网络缓冲区的实践
目录 1. 前言 2. 数据结构 3. 外部接口设计与实现 4. 完整代码与测试 1. 前言 请思考以下几个问题: 1).为什么需要设计网络缓冲区,内核中不是有读写缓冲区吗? 需要设计的网络缓冲区和内核中TCP缓冲区的关系如下图所示,通过socket进行进行绑定.具体来说网络缓冲区包括读(接收)缓冲区和写(发送)缓冲区.设计读缓冲区的目的是:当从TCP中读数据时,不能确定读到的是一个完整的数据包,如果是不完整的数据包,需要先放入缓冲区中进行缓存,直到数据包完整才进行业务处理.设计写缓冲区的目的是
-
使用nodejs搭建一个简易HTTP服务的实现示例
目录 先搭建一个简单的HTTP服务 根据不同的请求地址返回不同的信息 获取请求参数 实现服务端设置(跨域)cookie和读取客户端发送的cookie 本文只使用nodejs的http模块搭建一个简单的http服务. 主要实现功能: 响应客户端的请求. 处理不同的请求地址并返回信息. 获取客户端传递的请求体参数(json字符串)和查询字符串参数. 服务端设置cookie和读取客户端发送的cookie. 先搭建一个简单的HTTP服务 主要使用http模块的createServer方法和listen方
-
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
1.说明 运用技术:Vue2.0.Vux.vux-loader.vue-cli.vue-router.vuex 2.效果图 3.实现流程 3.1 搭建框架(需要安装好node.js.npm) 1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 npm install vue-cli -g // 如果还没安装 vuw-cli vue init airyland/vux2 projectName //注意,如
-
利用node.js如何搭建一个简易的即时响应服务器
前言 本文默认您已经按照 nodejs 如果没有安装请安装,安装教程可以查看这篇文章,下面废话不多说,下面来看看这篇文章详细的内容介绍吧. 前提需要创建一个 前端项目 1. 创建一个html文件 写入以下内容 需要说明的是 /socket.io/socket.io.js 这个文件 服务器会生成 使用方法在 node_modules\socket.io\lib\socket.js里面 2. 创建一个js文件 (我的文件名字叫sock.js) 这个js文件是需要运行的文件 里面的代码都有注释 3
-
编写React组件项目实践分析
当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我(作者)把我们团队这些年来总结的使用React的经验总结在这里.希望这篇文字对你有用,不管你是初学者还是老手. 开始前: 我们使用ES6.ES7语法如果你不是很清楚展示组件和容器组件的区别,建议您从阅读这篇文章开始如果您有任何的建议.疑问都清在评论里留言 基于类的组件 现在开发React组件一般都用的是基于类的组件.下面我们就来
-
使用webpack5从0到1搭建一个react项目的实现步骤
前言 在这之前,每开始一个新项目我都是使用现有的脚手架,这非常便于快速地启动一个新项目,而且通用的脚手架通常考虑地更加全面,也有利于项目的稳定开发:不过对于一个小项目,根据需求自己搭建可能会更好,一方面小项目不需要脚手架那么丰富的功能,另一方面可以提高对项目的掌控度以方便后期的扩展. 这篇文章是在实践中总结的,具有实操性,读者可跟着一步步进行搭建,中间我会穿插一些原理,当然因为笔者的能力有限,不会特别深入. 预备知识 熟悉Javascript && HTML && CSS