和我一起使用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应 ...
随机推荐
- MRT与MRTS工具官宣退休,推荐使用HEG
今天错误的删除搞丢了之前下载的MRT与MRTS工具,浏览Modis官网下载时发现找不到了,后来在其官网上发现了这则通知,原来早已停止更新的MRT这次彻底退修了.通知原文如下~~~ The downlo ...
- zabbix监控-基本原理介绍
一.Linux下开源监控系统简单介绍1)cacti:存储数据能力强,报警性能差2)nagios:报警性能差,存储数据仅有简单的一段可以判断是否在合理范围内的数据长度,储存在内存中.比如,连续采样数据存 ...
- C# wkhtmltopdf 将html转pdf(详解)
https://www.cnblogs.com/louby/p/905198.html转自,看文章只放了代码看起来云里雾里的,在此做些解析 使用说明: 1.首先呢,得安装下软件,地址下面有链接,文件里 ...
- sprint最后冲刺-out to out
摘要:团队合作.实现四则APP,上传代码到github. 1.之前我们队一直无法把代码上传到github.直到今天.找到了一种可以协助代码上github的软件msysgit. 经过:(一行行看) 我们 ...
- 开源通用爬虫框架YayCrawler-开篇
各位好!从今天起,我将用几个篇幅的文字向大家介绍一下我的一个开源作品--YayCrawler,其在GitHub上的网址是:https://github.com/liushuishang/YayCraw ...
- Docker for windows WIN版本,主板特性问题
WIN 10 Home版无法开启Hyper-V特性. Docker for windows有Hyper-V和VirtualBox两个版本: https://forums.docker.com/t/in ...
- Oracle Gateways 方式创建dblink 连接 SQLSERVER数据库
1. 安装多次 发现在同一个机器上面总出问题,所以建议找一个没有安装oracle的机器上面进行安装gateways 2. 下载oracle gateways 并且解压缩, 下载地址详情见官网. 下载的 ...
- Oracle 的ORION工具简单使用
1. 下载地址: http://www.oracle.com/technetwork/cn/topics/index-088165-zhs.html 2. linux x64 还有 windows的 ...
- Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件
$(function(){// 事件冒泡 $('').bind("click",function(event){ //事件内容 //停止事件冒泡 event.stopPropaga ...
- js timeout
setTimeOut(“”,毫秒):調用函數時,不是立刻執行,而是間隔一定的時間后在執行: clearTimeOut():清除計時器