react+webpack+babel+webpcak-dev-server+react-router-dom从无到有

最新推荐文章于 2024-10-05 16:10:44 发布
最新推荐文章于 2024-10-05 16:10:44 发布
阅读量124 收藏
点赞数
文章标签： webpack javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016273706
版权

react-demo

两个目标：

  • 手动搭建react脚手架：react、bable、webpack、react-router-dom、webpack-dev-server
  • 理解webpack从无到有打包原理

手动搭建react脚手架项目地址

有坑的地方会特别说明，因为好多文章都没有给出babel和webpack-dev-server的版本，所以在搭建过程中遇到比较多的问题。

1.react react react-dom
2.babel babel-loader babel-core babel-presets-es2015|stage-0|react

babel 这里的坑：注意babel的版本号，比如运行时报错babel/core找不到等等，需要降低babel的版本，

注意webpack.config.js配置文件中的loader书写，需要从webpack官网找，有的博客写的不对会造成错误

注意需要有一个.babelrc的文件

3.webpack
4.webpack-dev-server

使用webpack-dev-server --hot --inline --config webpack.config.js 运行报错，注意降低webpack-dev-server的版本号

5.react-router-dom
weixin_33725272
关注
webpack+react新建项目—— 使用react-router-dom和antd
weixin_54012475的博客
02-24 575
安装react-router-dom npm install react-router-dom 修改app.tsx组件 import React, { useState } from "react"; import { BrowserRouter, Route, Link, Routes } from "react-router-dom" interface IProps { title: string } const About = () => { return &lt
webpack-dev-server解决单页面应用路由问题
Riona_cheng的博客
09-10 2586
纯手工搭建webpack项目，解决单页面路由问题
react-redux-explain:这是一个基于webpack、webpack-server-dev搭建的react项目,使用了react-router-dom、redux、redux-react ，涉及登陆拦截、路由传参，http服务配置....
05-10
react-cli 项目介绍 react-cli 软件架构 一个基于webpack、webpack-server-dev搭建的react项目; 使用react-router-dom、redux、redux-react技术，并对源码分析，手动实现; 涉及登录拦截，路由传参，http服务搭建 安装教程 打开git 运行 git clone 或点击下载ZIP后解压 使用说明 cd 项目目录 npm install npm run dev
简单搭建基于webpack的React环境
weixin_48732874的博客
11-09 144
一、准备工作 1、创建文件夹和文件： dist public *index.html src *components *pages *App.jsx *main.jsx webpack.config.js package.json(根目录下，cmd，指令：npm init -y 可获得) 2、安装依赖–指令： npm i react react-dom npm i webpack webpack-cli webpack-dev-server npm i @babel/core babel-loader
react-router-dom和本地服务本地开发 (node、webpack)
weixin_30550271的博客
08-28 144
场景 使用react 做开发，避免会使用react-router React Router 已经是V4的版本 React Router 目前已经被划分成了三个包：react-router，react-router-dom, react-router-native。 React Router 应用提供了核心的路由组件和函数，另外两个包提供了特定环境的组件（浏览器和 react-native 对应的平...
webpack-dev-server与单页应用路由
Meskjei的博客
09-07 581
首先是三个使用React编写的文件： index.js： import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { BroswerRouter, Route } from 'react-router-dom'; import Home from './Home'; import List...
react-webpack-babel-eslint-boilerplate：高级React + Webpack + Babel + ESLint +路由器基础项目
02-05
高级React | Webpack | 巴别塔ESLint样板 React + Webpack + ESLint + DotENV + ... 产品特点 React Webpack 巴别塔 环境变量 Webpack附加组件 ESLint +漂亮 热装机 路径别名 安装 git clone git@github....
基于react+redux+react-router+webpack+es6+axios的仿QQ音乐客户端项目（毕设&课设）
05-28
基于react+redux+react-router+webpack+es6+axios的仿QQ音乐客户端项目，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介： 技术栈 react react-router ...
react-webpack-starter:React（+ react-router v4），Webpack，HMR，Babel，TypeScript，PostCSS，Material Design，RxJS，Prettier
05-18
webpack-dev-server + HMR 动态进口 打字稿 巴别塔+填充 jsx + react + react-router v4 + RxJS 材料设计（material-ui） css + scss + postcss（CSS模块+ cssnext） 更漂亮+短绒 沙哑（预提交钩子）+皮棉 2. ...
earthquake-zen-garden:React + React-Router + Webpack + Babel
05-25
【标题】"earthquake-zen-garden"是一个项目模板，结合了React、React-Router、Webpack和Babel等技术，用于快速搭建现代JavaScript应用程序。这个项目名称可能来源于日本的“枯山水”（Zen Garden），寓意着简洁、...
React-Boillerplate-Easy:React + Redux + Thunk + React-router + Webpack 4 + Prettier + ESlint + Babel
05-16
React-Boillerplate-Easy轻松 React + Redux + Thunk + React-router + Webpack 4 + Prettier + ESlint + Babel 正在安装 请按照以下步骤使用： npm install 在发展之后 npm run dev 运行构建 npm run build
使用react-router-dom时，手动刷新URL地址加载资源失败解决方法
ngd-b的博客
07-14 2829
解决使用react-router-dom 进行路由设置是的问题： 1. 前端手动刷新浏览器是路由报错404 的问题。 2. 部署后找不到路由的问题（给出了Node服务下的解决方式）
webpack-dev-server搭配react-router找不到资源文件的问题解决
Michael_Li的博客
01-24 2126
最近使用webpack3 + react-router4开发一个小项目, 发现使用BrowserRouter时进入到二级url, 如从localhost:8080/ 进入到 localhost:8080/background时本来的资源文件会找不到. 问题的解决方法是所有的资源文件都使用绝对路径, 因为在webpack.config.js配置的是:devServer: { // 本地服务
react-router 使用webpack-dev-server做服务器时 单级刷新报错 Cannot GET /xx。多级刷新报错404
LimonSea的博客
07-22 1520
场景：在当前url刷新时页面变为Cannot GET /xx 有可能你用了 webpack-dev-server工具，需要在webpack.config.js中配置： module.exports = { ...... devServer: { ... historyApiFallback: true, // 这句话 }, } 再试试吧！ ...
React+react-router4+webpack2基础环境搭建
Jancy的博客
04-28 2980
package.json文件"devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.0", "react-hot-api": "^0.5.0", "reac
webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-tran...
weixin_30323961的博客
08-29 871
一、 问题描述 在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误 最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。 二、 解决方法 带着半信半疑的心情安装回@...
Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新
前端探索者
09-29 1201
Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。
讲讲Webpack的打包过程/打包原理/构建流程？
唐家小妹的博客
10-03 371
在整个打包过程中，Webpack会根据配置文件中的规则和插件对项目中的各种资源文件进行处理和优化，最终生成可供浏览器加载的静态资源文件。这种模块化的打包方式使得前端项目更易于管理和维护，同时也提高了项目的性能和加载速度。
基于SpringBoot的学习资源共享平台
最新发布
10-05 357
后端：SpringBoot+Mybatis-Plus+logback+Elasticsearch+Redis+MySQL+Jwt+smtp+阿里云OSS。运行环境: jdk8+tomcat9+mysql+IntelliJ IDEA+maven+nodejs。前端：WebPack+VueJs+Ant Design+axios。主要模块：反馈管理、资源管理、系统管理、日志管理、个人管理。设计选用前后端分离的单体架构方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值