和我一起使用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应 ...
随机推荐
- windows 脚本
sudo.vbs http://blog.csdn.net/qidi_huang/article/details/52242053 c:\windows\sudo.vbs 'ShellExecute ...
- nginx通过https方式反向代理多实例tomcat
案例说明:前面一层nginx+Keepalived部署的LB,后端两台web服务器部署了多实例的tomcat,通过https方式部署nginx反向代理tomcat请求.配置一如下: 1)LB层的ngi ...
- php 中self,this的区别和实地操作
面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行PHP的高级编程,对于提高PHP编程能力和规划web开发构架都是很有意 ...
- 求去掉一条边使最小割变小 HAOI2017 新型城市化
先求最小割,然后对残量网络跑Tarjan.对于所有满流的边,若其两端点不在同一个SCC中,则这条边是满足条件的. 证明见 来源:HAOI2017 新型城市化
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- Pair Project 1 elevator
结对编程——电梯调度 12061181 高孟烨 12061182 郝倩 1.结对编程的优缺点: 优点:结对编程可以结合两个人各自擅长之地,充分发挥两个人各自的优势,两个人一起合作效率会更高.一份工作两 ...
- Sprint 冲刺第二阶段之1---5天(上)
11月24号——12月8号,这一个时间段学校的电压不是很稳定,时不时会断电,为了冲刺的完整性,我们商量决定把这一时间段做的事情写成一个连贯的小日记.然后统一在整个时间段一起发出来. 经过一个阶段的努力 ...
- Windows 7 64位安装cURL
安装cURL. 1, 下载64位的SSL版cURL,网址: http://curl.download.nextag.com/download/curl-7.21.7-win64-ssl-sspi.zi ...
- 配置Activiti Explorer使用MYSQL
http://blog.csdn.net/lxxxzzl/article/details/39583977
- Oracle 导入导出报错的简单处理
这边出现报错: 简单查了下资料发现: https://blog.csdn.net/lichkui/article/details/5489708 在imp 的命令后面 增加buffer 即可 比如 i ...