第一步:初始化项目并创建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项目的更多相关文章

  1. webpack构建react项目(一)

    前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或 ...

  2. 【转载】基于webpack构建react项目

    第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置

  3. [react001] 使用webpack自动构建react 项目

    1.react 简介 React 是一个Facebook出品的前端UI开发框架.react官方的tutorials 为了让人容易上手,并没有给在平常工作使用react的详细配置,随意学习的深入,你为了 ...

  4. 简述--构建React项目的几种方式

    前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...

  5. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  6. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  7. 使用 Dawn 构建 React 项目

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...

  8. 在visual code的debugger for chrome中调试webpack构建的项目

    一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...

  9. webpack构建react多页面应用

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...

随机推荐

  1. CF 1047 C. Enlarge GCD

    传送门 [http://codeforces.com/contest/1047/problem/C] 题意 给你n个数,移除最少的数字使剩下的数字GCD大于初始GCD 思路 需要一点暴力的技巧,先求出 ...

  2. Oracle系列(三): 情景查询一 a表中有个fid字段,逗号分隔开来,b表中有id字段及其他信息,如何关联a表的fid和和b表的id字段查询

    现在有两个表,表a中 DOC FID 1 a,b,c 2 a,c,d 表b中 ID KEY a A b B c C d D 怎么联合查询出 DOC FID KEY 1 a,b,c A,B,C 2 a, ...

  3. python 函数及变量作用域及装饰器decorator @详解

    一.函数及变量的作用   在python程序中,函数都会创建一个新的作用域,又称为命名空间,当函数遇到变量时,Python就会到该函数的命名空间来寻找变量,因为Python一切都是对象,而在命名空间中 ...

  4. Python 中的字符串(str)、字典(dict)详解及操作方法

    一.字符串 在python中字符串是一种重要数据类型.其他数据类型分别为: 数字-number -------- int.long.float.complex这几种 字符串-string ------ ...

  5. Golang的格式化输出fmt.Printf

    本文来源:Go by example. Golang的格式化输出 和 C语言的标准输出基本一样,但是增加了一些针对Golang语言的特有数据结构的格式化输出方式. 一下就是实例: package ma ...

  6. Activiti动态设置办理人扩展

    关键词:Assignee.Candidate users.Candidate groups:setAssignee.taskCandidateUser.taskCandidateGroup 主要解决问 ...

  7. cmd常用

    npm install -g npm              npm就自动为我们更新到最新版本 npm install -g cnpm --registry=https://registry.npm ...

  8. WebService相关

    1.WebService 之 WSDL文件 讲解 2.WSDL样式详解 3.IntelliJ IDEA 开发 WebService 4.浅谈WebService的调用 5.用IDEA8快速开发WebS ...

  9. JavaScript中的Date对象在IOS中的“大坑”

    在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...

  10. loadrunner基础学习笔记六-运行负载

    controller视图: 场景组 窗格:查看场景组内vuser状态,使用窗格右侧的按钮可以启动.停止和重置场景,查看各个vuser的状态,通过手动添加更多vuser增加场景运行期间应用程序的负载 场 ...