和我一起使用webpack构建react项目
第一步:初始化项目并创建package.json文件

第二步:创建webpack.config.js文件,并写入配置。


第三步:安装webpack以及创建es6语法环境,要将html作为模板文件解析的时候也要安装插件,并写入配置。



第四步:解析react的jsx语法,创建.babelrc文件,并修改.package.json文件。



第五步:安装react-dom,然后运行项目。有出现
故可以使用
进行webpack的安装。并修改webpack.config.js文件。

如果还有报错的话可以直接删除包,进行下载,便可以直接运行项目的。

图为运行的项目

若使用编译命令便可以看到(如图),即为可以上线使用的项目。

很想把完整的demo也给大家看,已经上传到github了:https://github.com/JserJser/reactDemo/tree/master/react-demos
和我一起使用webpack构建react项目的更多相关文章
- webpack构建react项目(一)
前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或 ...
- 【转载】基于webpack构建react项目
第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置
- [react001] 使用webpack自动构建react 项目
1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- 基于webpack的React项目搭建(一)
前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 使用 Dawn 构建 React 项目
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...
- 在visual code的debugger for chrome中调试webpack构建的项目
一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...
- webpack构建react多页面应用
写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...
随机推荐
- Jmeter(非GUI模式)教程
前言 使用非 GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源.优点如下:1.节约系统资源:无需启动界面,节约系统资源 2.便捷快速:仅需启动命令行,输入命令便可执行 ...
- rem、em、px、pt及网站字体大小设配
rem:相对的只是HTML根元素字体尺寸; em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小); px像素(Pixel):对于显示器屏幕分辨率而言的; pt:point,是印刷 ...
- BugPhobia启程篇章:需求分析与功能定位
0x01 :引言 If you weeped for the missing sunset, you would miss all the shining stars 我看着大巴缓缓的驶过街角,我躲在 ...
- Oracle的安装与配置
好久不来博客园了,有种熟悉而又陌生的感觉. 今天我装一下Oracle数据库,从头开始,因为昨天在虚拟机装了,不能用,卸掉了,系统也卸掉了,今天重新装,包括系统. 系统装好了,Oracle准备好了. 这 ...
- git工具使用包括上传本地代码到服务器
我是参考这个的 https://www.cnblogs.com/tonycheng93/p/4460052.html
- 小学四则运算APP 第二阶段冲刺-第三天
团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第二次冲刺阶段时间:11.29~12.09 本次发布的是判断题的部分代码 panduanset.java import com.examp ...
- HDU 2011 多项式求和
http://acm.hdu.edu.cn/showproblem.php?pid=2011 Problem Description 多项式的描述如下:1 - 1/2 + 1/3 - 1/4 + 1/ ...
- 服务器RAID设置以及简单理解
备注: 适用于测试环境,生产环境暂时未验证 1. RAID种类 最高性能的RAID0 完全拆分所有的IO 不进行校验 但是单盘损坏, 数据完全丢失 最高损耗的RAID1 损失一半的存储容量, 做镜像, ...
- ionic3.x开发小坑记录(一)
自定义font的时候,在assets中创建的文件夹名字别用fonts,会与ionic默认样式冲突,在浏览器中调试是正常的,到手机上就出问题了. 在html中写img的src直接如图 assets前面 ...
- python之使用heapq()函数计算列表中数值大小
# heapq函数:计算列表最大几个值和最小几个值 # 语法:heapq.nlargest(n, list,[key]) # n表示最大或最小的几个: list为分析的对象: key为排序关键字,非必 ...