和我一起使用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应 ...
随机推荐
- Nextcloud私有云盘在Centos7下的部署笔记
搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储.初一看觉得“口气”不小,刚推出来就重新“定义”了Clo ...
- 项目开发之package.json
Name 必须字段. 提示: 不要在name中包含js, node字样: 这个名字不能以点号或下划线开头: 这个名字不能包含有大写字母: 这个名字可能在require()方法中被调用,所以应该尽可能短 ...
- linux书籍
<鸟哥私房菜-基础版> <实战LINUX_SHELL编程与服务器管理> <LINUX命令行与SHELL脚本编程大全第2版].布卢姆.扫描版> <Linux初学 ...
- D. Boxes Packing
链接 [http://codeforces.com/contest/1066/problem/D] 题意 题目大意 n个物品m个篮子每个篮子容量为k 每个物品重量为a[i] 问能装多少物品 这个人是强 ...
- 个人博客作业_week1
1.<构建之法>的5个问题 1.如何避免在产品开发后期不断有重大修改,导致其他模块的连锁反应? 2.游戏用户有哪些类型? 3.如何衡量软件工程的质量? 4.怎么协调团队里相互间的任务分配? ...
- Linux内核分析作业第八周
进程的切换和系统的一般执行过程 一.进程调度的时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用sch ...
- 2017-2018-2 1723《程序设计与数据结构》第八周作业 & 实验二 & 第一周结对编程 总结
作业地址 第八周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1847 (作业界面已评分,可随时查看,如果对自己的评分有意 ...
- beta 答辩总结
评审表 编号 团队名称 项目名称 格式 内容 PPT 演讲 答辩 总分/100 1 天机组 指尖加密 14 13 13 13 13 66 2 PMS Your eyes 14 14 17 14 15 ...
- 什么是Consul
什么是Consul Consul文档简要整理 什么是Consul? Consul是一个用来实现分布式系统的服务发现与配置的开源工具.他主要由多个组成部分: 服务发现:客户端通过Consul提供服务,类 ...
- PHP和JavaScript将字符串转换为数字string2int
在看廖雪峰的JavaScript教程时,里面有一个题就是利用reduce()将string转换为int,我看评论中贴出的方法,当时觉得挺意外了,以为他只用了一行代码,即下面这行代码 var str=& ...