第一步:初始化项目并创建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. [朴孝敏][Ooh La La]

    歌词来源:http://music.163.com/#/song?id=484058960 作曲 : Damon Sharpe/Jimmy Burney/Adam Kapit [作曲 : Damon ...

  2. Nginx基于TCP/UDP端口的四层负载均衡(stream模块)配置梳理

    通过我们会用Nginx的upstream做基于http/https端口的7层负载均衡,由于Nginx老版本不支持tcp协议,所以基于tcp/udp端口的四层负载均衡一般用LVS或Haproxy来做.至 ...

  3. PHP从入门到精通(四)

    PHP数组中的常用函数汇总 为了更直观的讲解各函数的作用和用法,方便大家的理解,首先,我们来定义一个数组.下面各函数的操作将以本数组为例: $arr = array(1,2,3,4,5,6," ...

  4. BugPhobia开发篇章:Beta阶段第IX次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第九次Scrum Meeting 敏捷开发起始时间 2015/12/25 00:00 A.M. 敏捷开发终止时间 2015/12/28 23 ...

  5. Linux内核第二节

    作者:武西垚 深入理解函数调用堆栈 堆栈是C语言程序运行时必须的一个记录调用路径和参数的空间 堆栈的作用 函数调用框架 传递参数 保存返回地址 提供局部变量空间 堆栈相关的寄存器 esp,堆栈指针,指 ...

  6. Leetcode 546. Remove Boxes

    题目链接: https://leetcode.com/problems/remove-boxes/description/ 问题描述 若干个有序排列的box和它们的颜色,每次可以移除若干个连续的颜色相 ...

  7. HDOJ2032_杨辉三角

    这是一道水题,思路很简单,把杨辉三角先求出来,然后按照输入将相应的层数的杨慧三角输出即可. HDOJ2032_杨辉三角 #include<stdio.h> #include<stdl ...

  8. ABP编译必须添加对程序集“netstandard, Version=2.0.0.0错误

    当前使用ABP版本为:4.6.0 升级vs2017到15.4版本,升级framework到4.7版本 如果Core版本请升级到net core 2

  9. Which path should be used jdk or jre for JAVA_HOME environment variable?

    https://stackoverflow.com/questions/17601827/which-one-should-java-home-to-point-jdk-or-jre 临时变更JAVA ...

  10. Java的Vector源码阅读

    * The {@code Vector} class implements a growable array of * objects. Like an array, it contains comp ...