现在react开发,公司用的要么是create-react-app这个脚手架,要么是umi,这些脚手架也是基于webpack的,只是添加了一些实践中比较好用功能进去,最近就想研究一下怎么通过webpack从0到1搭建一套适合自己的React开发环境。 这次探索使用的主要软件及版本如下: Node: v14 Webpack: v5.72.0 React: v18 Babel: v7 typescri...
constpath=require("path")module.exports={// ...module:{rules:[{test:/.(ts|tsx)$/,//匹配ts、tsx文件use:{loader:"babel-loader",options:{//预设执行顺序由右往左,所以这里是先处理ts再处理jsxpresets:["@babel/preset-react","@babel/preset-typescript"]}}}]}} 2.1.4、配置extensions extebsi...
集成React 要使用react,首先需要安装react跟react-dom,如下: npm install react react-dom 安装好以后,我们就可以写react独特的JSX语法代码了,还记得在上面的时候,我已经安装过@babel/preset-react,这个就是实现将jsx转换为ES5代码的插件,下面我们在index.js里面写点代码,然后在index.html中添加一个div承载需要渲染的...
abc'test:/\.svg$/,resourceQuery:/abc/,// 以webpack的资源形式加载(普通资源文件、base64等)type:'asset',},{// 除了上面的匹配规则,我们都按照React组件来使用test:/\.svg$/,resourceQuery:{not:[/abc/]},use:['@svgr/webpack']}]},...} web...
yarn add react react-dom webpack-cli是webpack的命令行工具,用于在命令行中使用webpack。 接下来让我们去分别创建不同的页面目录,假设我们存在两个多页面应用。 一个editor编辑器页面,一个home主页。 安装完成之后让我来改变改变目录文件: 创建的项目配置如下,我们分别先来讲讲这两个基础文件夹 ...
配置react支持 接下来让我们的项目先支持最原始的jsx文件,让项目支持react的jsx。 支持jsx需要额外配置babel去处理jsx文件,将jsx转译成为浏览器可以识别的js。 这里我们需要用到如下几个库: babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime ...
安装 bable 等依赖 npm install @babel/core babel-loader @babel/preset-env @babel/preset-react -D npm install html-loader -D 在根目录下创建 .babelrc 文件,内容如下: { "presets": ["@babel/preset-env", "@babel/preset-react"] } 在webpack.config.js文件 module 中添加如下代码: module: { ...
线上地址:https://chenlong-io.github.io/react-admin/index.html 项目地址:https://github.com/chenlong-io/react-admin欢迎 Star 和提供更好的建议 概述 该管理后台基于 webpack5、 react@17、react-router@5.2、typescript、antd@4.10 状态管理使用mobx@6.x,相比 redux 使用更简单,整个项目使用多 store 进...
本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack + react + typescript的标准化前端应用。 作者| 刘皇逊(恪语 前言 本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack + react + typescript的标准化前端应用。 技术栈: webpack5 + React18 + TS ...
创建一个新的目录,用于搭建React项目。 mkdirreact-clicdreact-cli step2--初始化项目 初始化项目生成package.json文件。 npm init -y step3--新建webpack开发模式配置文件 新建config目录文件夹,在创建开发配置文件,并定义好初始配置结构。 文件名:webpack.dev.js ...