Webpack 3.x 通过webpack安装React和Babel

最新推荐文章于 2024-03-29 08:57:33 发布
最新推荐文章于 2024-03-29 08:57:33 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： webpack3-x 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stanxl/article/details/78631602
版权
本文介绍了如何通过Webpack 3.x安装和配置React及Babel，详细步骤包括安装Babel、创建.babelrc文件、配置Webpack以支持JSX。在过程中遇到的JSX编译错误及解决办法也一并阐述。
摘要由CSDN通过智能技术生成

之前用最原始的方式写过一个React的hello world，参见：原始React hello world

在React的官网上面会介绍好几种方式去安装React，下面尝试通过Webpack来安装：

npm i -D react react-dom

安装完成后的版本：

"react": "^16.1.1",
"react-dom": "^16.1.1",

在使用React的时候，必须要熟悉ES6与Babel，官网上面对它的介绍：Enabling ES6 and JSX

  • JSX：(JavaScript XML)是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，要解析它的话，就要用到Babel，Babel是一个JS compiler, seems 专为React而生，还不能确定别的地方有没有用到过Babel。先安装Babel：
npm i -D babel babel-preset-react babel-preset-es2015 babel-preset-env
<
最低0.47元/天 解锁文章
Stangor
关注
专栏目录
webpack 3.X 安装与配置
Stan的专栏
11-23 8623
组件如何接收属性，所有的属性都可以通过this.props对象获取，像下面这样去使用：<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.
webpack 3.X学习之Babel配置
weixin_30678349的博客
11-23 132
Babel是什么 Babel是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到： 使用下一代的javascript（ES6，ES7,……）代码，即使当前浏览器没有完成支持； 使用基于JavvScript进行扩展语言，比如React的JSX； webpack配置Babel 安装依赖包： npm install --save-dev babel-core bab...
手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
weixin_30361641的博客
03-13 148
开发环境和生产环境整个配置源码在github上，源码地址：github-webpack-react如果觉得有帮助，点个Star谢谢！！ (一)是开发环境，(二)是生产环境。 一、首先创建package.json并且安装webpack和webpack-dev-server //不用你书写任何，直接帮你创建一个最简单的package.json文件npm init -y //webpack...
通过webpack从零开始搭建React项目
knowledge_bird的博客
04-26 3580
从零开始搭建React项目 1. Webpack基础概念 webpack主要作用： 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功...
webpack搭建 react 环境
weixin_43503730的博客
07-13 241
1、不用脚手架，使用webpack搭建react环境详细步骤 1）创建package.json文件 # 手动配置 npm init # 自动配置 npm init -y 2）安装webpack工具（开发环境安装） cnpm i webpack webpack-cli --save-dev/-D 3）安装react（生产环境安装） cnpm i react react-dom --save/-S 4）安装babel相关（开发环境安装） # 安装 babel和react相关加载器 cnpm i babel
基于webpack4.X从零搭建React脚手架的方法步骤
10-17
接下来，需要安装webpack以及webpack-dev-server，因为webpack 4.X版本不再包含命令行工具，所以还需要安装webpack-cli： ```bash npm install --save-dev webpack webpack-cli ``` 在项目根目录下创建build目录，...
Webpack 4.x搭建react开发环境的方法步骤
10-18
在本篇内容中，我们将详细介绍如何使用Webpack 4.x版本搭建React开发环境，步骤包括安装必要的依赖、配置Webpack以及如何通过npm脚本进行打包。 首先，为了支持React项目，我们需要安装一些依赖包，这些包包括babel...
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程
01-08
[React][2020] webpack 4.x 项目中配置解析 jsx 语法的babel-loader全流程 目录 安装babel插件 安装babel用于解析jsx语法的包 配置 webpack.config.js 配置 .babelrc 文件 正文 提示: 本文使用的babel及相关插件皆为...
webpack v.3.x 入门（一） — 安装
starleejay的博客
09-28 1122
webpack v.3.x 入门（一） — 安装环境要求webpack 依赖于 node.js 环境，在使用 webpack 之前，下载安装 node.js 。安装 webpack 全局安装 全局安装后可以供命令行在全局环境下，直接运行 webpack 命令。在全局安装时，将会使项目中的 webpack 锁定到指定的版本，在使用不同版本的项目中，可能会导致构建失败。 npm install w
Webpack搭建React项目
乔木的博客
06-03 242
Webpack搭建React项目 先创建一个myapp的文件夹，然后运行cmd 第一步 安装模块 初始化，生成package.json npm init -y 安装react模块 我这选择的版本是 16.13.1 #安装react npm install react@16.13.1 --save #安装react-dom cnpm install react-dom@16.13.1 --save 安装webpack工具 #安装webpack和webpack-cli npm install webpack
132. 【前端】webpack-搭建-React-应用环境（一）
七镜的博客
02-20 154
好了，接下来可以随便玩了，想怎么改怎么改，不需要再受看不懂 create-react-app 这种脚手架配置的气了。十、package-lock.json 文件内容（随 npm 自动生成的，无需关注）十二、webpack.config.js 文件内容。八、babel.config.json 文件内容。十一、tsconfig.json 文件内容。九、package.json 文件内容。七、index.tsx 文件内容。五、app.scss 文件内容。六、app.tsx 文件内容。
webpack的babel配置
qq_42750608的博客
09-07 518
首先全局下载webpack3.x版本=>cnpm i webpack@3.10.0 -g 然后npm init => 一路enter下去 => 然后开始下载插件,进行配置: 先来点小知识: 一,webpack支持: 1.AMD(requireJS) 主流: 2.ES Modules(推荐的) 3.CommonJS 二,核心概念: 1.entry:打包的入口 2.output:打包输出 3.loaders:处理js之外的类型的资源文件 4.plugins:插件..
webpack3 安装配置、基本应用
weixin_43294560的博客
01-30 388
webpack 构建工具 (1)自带模块换(commonjs规范) (2)编译es6->es5,jsx-es5 (3)自带服务器,webpack-dev-server (4)react,vue使用该环境 安装webpack 1、安装全局webpack cnpm/npm install -g webpack 2、项目初始化package.json npm init -y 3...
Webpack核心loader (三）—— babel-loader
小苹果的成长笔记
08-26 648
base-loader 解析es6,将es6转化成es5,将react的jsx语法转化成浏览器可以认识的语言 1.babel-loader //针对于babel的loader文件 2.@babel/core //babel核心文件 3.@babel/preset-env //解析更高级代码 安装： cnpm i babel-loader @babel/core @babel/preset...
从零开始，用Webpack构建React基础教程
最新发布
2401_83916394的博客
03-29 932
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
初学webpack（3.X版本），手动搭建的一个简单多页面项目
啊哈前端的专栏
05-03 379
这个配置是基于webpack3.X版本的； 1、第一个文件webpack.util.js，主要作用是自动读取入口文件并进行配置，自动生成html模板的配置文件 const glob = require('glob'), path = require('path'), htmlWebpackPlugin = require('html-webpack-plugin'), ...
react + webpack安装配置
weixin_33853794的博客
01-20 115
使用CDN库方式 <script src="http://...
webpack入门介绍（webpack 3.X）
Vv_mkziyuan
01-01 968
webpack是为什么？ 为什么要使用webpack？ 怎么配置webpack？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值