深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的。下面我们也是在之前项目结构的基础之上进行配置下。

首先看下如下是我为 webpack4+react 基本的项目结构如下:

### 目录结构如下:
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目录文件             
|   |--- node_modules                       # 所有的依赖包
|   |--- app
|   | |---src
|   | | |-- index.jsx                       # 项目的入口文件jsx
|   | | |-- hello.jsx
|   |--- views
|   | |-- index.html                        # html文件
|   |--- webpack.config.js                  # webpack配置文件 
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel转码文件

app/src/hello.jsx 代码如下:

module.exports = 'Hello React';

app/src/index.jsx 代码如下:

import React from 'react';
import ReactDOM from 'react-dom';// 引入 hello.jsx
const hello = require('./hello.jsx');// 编写一个简单的组件 
class App extends React.Component {render() {return (<h1 style={{color: 'red'}}>{hello}</h1>
    )}
};// 创建一个组件实列,将组件挂载到元素上
ReactDOM.render(<App />, document.getElementById('app'));

views/index.html 代码如下:

<!DOCTYPE html> 
<html>
<head><title>webpack+react项目架构</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
</head>
<body><div id="app"></div></script>
</body>
</html>

二:安装react相关的包如下:

npm install babel-preset-react react react-dom --save

babel-preset-react 用于支持React开发里的JSX的语法。

三:.babelrc文件配置如下假如react的配置:

{"plugins": [["transform-runtime",{"polyfill": false}]],"presets": [["env",{"modules": false   // 关闭Babel的模块转换功能,保留ES6模块化语法
       }],"stage-2",'react']
}

运行 npm run dev 后 打包,运行如何,可以看到基本配置好了。

查看github代码

转载于:https://www.cnblogs.com/tugenhua0707/p/9823511.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Webpack 4进阶--从前的日色变得慢 ,一下午只够打一次包

从前的日色变得慢&#xff0c;车&#xff0c;马&#xff0c;邮件都慢&#xff0c;一生只够爱一个人 -- 《从前慢》 近期在团队项目里把Webpack升级到4.4.1&#xff0c;过程中发现现存的升级文档十分有限&#xff0c;踩了不少坑&#xff0c;好在升级之后提升还算显著&#xff0c…

使用Guava MapSplitters配置Hadoop

在本文中&#xff0c;我们将为通过Context对象将配置参数传递给Hadoop Mapper提供新的思路。 通常&#xff0c;我们在启动map-reduce作业时将配置参数设置为Context对象上的键/值对。 然后&#xff0c;在Mapper中&#xff0c;我们使用键来检索用于我们的配置需求的值。 不同之处…

pdo 参数化查询 mysql函数_PDO笔记之参数化查询

参数化查询解释在这里&#xff1a;Wiki参数化查询 (少有的Wiki中文比英文介绍的要详细的编程条目)PDO中参数化查询主要用到prepare()方法&#xff0c;然后这个方法会返回一个PDOStatement对象&#xff0c;也就SQL声明(不知道怎么翻译)&#xff0c;此时SQL语句只是被编译&#x…

二叉树和哈希表的优缺点对比与选择

二叉树(binary tree)和哈希表(hash table)都是很基本的数据结构&#xff0c;但是我们要怎么从两者之间进行选择呢&#xff1f;他们的不同是什么&#xff1f;优缺点分别是什么&#xff1f; 回答这个问题不是一两句话可以说清楚的&#xff0c;原因是在不同的情况下&#xff0c;选…

编码Java时的10个微妙的最佳实践

这是10个最佳实践的列表&#xff0c;这些最佳实践比您的平均Josh Bloch有效Java规则要微妙得多。 尽管Josh Bloch的列表很容易学习&#xff0c;并且涉及日常情况&#xff0c;但此处的列表包含了涉及API / SPI设计的较不常见的情况&#xff0c;但可能会产生很大的影响。 我在编…

Vue 实现微信 jssdk 扫码, 上传图片

流程 1: 配置微信公众号JS域名 2:前端发送URL后台获取JSSDK配置, 后台Service代码如下, 修改2处位置: WeixinUtil.APPID > 当前公众号APPID WeixinUtil.getAccessToken() > 当前公众号access_token public interface IWxJssdkService {Map<String, Object> getJssd…

有意思的前端函数面试题

1:考引用类型在比较运算符时候 隐式转换会调用本类型那个方法 toString和valueOf&#xff1f;(去年过年吵的很火国外的题) if(a 1 && a 2 && a 3){console.log("我走进来了"); }<!--答案1:--> var a {num:0}; a.valueOf function(){retur…

用java写个简单的直播强求_全网最简单易懂的Netty入门示例,再不会用Netty我直播吃翔...

//server引导类ServerBootstrap serverBootstrap new ServerBootstrap();//boss 对应 IOServer.java 中的接受新连接线程,主要负责创建新连接NioEventLoopGroup boss new NioEventLoopGroup();//worker 对应 IOServer.java 中的负责读取数据的线程,主要用于读取数据以及业务逻…

XamarinAndroid组件教程设置自定义子元素动画(一)

XamarinAndroid组件教程设置自定义子元素动画(一) 如果在RecyclerViewAnimators.Animators中没有所需要的动画效果&#xff0c;就可以自定义一个。此时&#xff0c;需要让自定义的动画继承BaseItemAnimator抽象类。 【示例1-2】下面以RecylerViewAnimatorsItemAnimator项目为基…

使用Storm进行可扩展的实时状态更新

在本文中&#xff0c;我将说明如何借助Storm框架以可扩展且无锁定的方式在数据库中维护实时事件驱动流程的当前状态。 Storm是基于事件的数据处理引擎。 它的模型依赖于基本原语&#xff0c;例如事件转换&#xff0c;过滤&#xff0c;聚合……&#xff0c;我们将它们组合成拓扑…

python关于字典嵌套字典,列表嵌套字典根据值进行排序

python 对于字典嵌套字典&#xff0c; 列表嵌套字典排序 例&#xff1a;列表嵌套自字典&#xff1a;d [{"name": 张三, s: 68}, {name: 李四, s: 97}] 对于列表嵌套字典可以使用python的sorted()方法&#xff0c;也可以使用list的sort()方法&#xff1a; sorted方法…

【干货】十分钟读懂浏览器渲染流程

在之前写过的一篇《"天龙八步"细说浏览器输入URL后发生了什么》一文中&#xff0c;和大家分享了从在浏览器中输入网址URL到最终页面展示的整个过程。部分读者向我反馈对于最后的浏览器渲染布局这块不是很清晰&#xff0c;所以本文就浏览器渲染流程单独开篇讲解&#…

控制台资费管理主菜单java_java毕业设计_springboot框架的高速公路收费管理系统...

今天介绍一个java毕设题目, 题目内容为springboot框架的高速公路收费管理系统, 是一个采用b/s结构的javaweb项目, 采用java语言编写开发工具eclipse, 项目框架jspspringbootmybatis, 高速公路收费管理系统的信息存储于mysql中, 并基于mybatis进行了orm封装, 该高速公路收费管理…

Hibernate框架的搭建和一个简单的实例

Hibernate是一个支持对JDBC进行封装的框架&#xff0c;实现了对底层数据库访问的封装。非常适合使用和开发。首先需要下载Hibernate&#xff0c;可以在这个网站下载最新包。http://www.hibernate.org/然后打开他的目录结构&#xff0c;将lib目录下的required目录下的包全部导入…

在Amazon EMR上运行Hadoop MapReduce作业

不久前&#xff0c;我发布了如何使用CLI设置EMR群集的信息。 在本文中&#xff0c;我将展示如何使用适用于AWS的Java SDK来设置集群。 展示如何使用Java AWS开发工具包执行此操作的最佳方法是展示完整的示例&#xff0c;因此&#xff0c;让我们开始吧。 设置一个新的Maven项目…

在商城系统开发时遇到商品的多级分类,为增强扩展性,子类可以任意添加,此类问题数据库如何设计...

表结构为&#xff1a; id&#xff08;编号&#xff09; name&#xff08;分类名&#xff09; parentID&#xff08;父类编号&#xff09; 简单举例如下&#xff1a; id name parentID 1 饮料 0&#xff08;为0表示第一大类&#xff09; 2 水果 …

[JSConf EU 2018] 大脑控制 Javascript

先解释&#xff0c;本人为前端菜鸟&#xff0c;之前也未参加过类似的活动&#xff0c;没有翻译过什么文章&#xff0c;此次是好奇心使然&#xff0c;也是想尝试下&#xff0c;学习学习&#xff0c;英文很烂&#xff0c;全靠有道&#xff0c;但是视频整个看下来&#xff0c;还是…

init tarray 太大_[NOIP 2001提高组T4]Car的旅行路线

[题目来源]&#xff1a;NOIP2001提高组T4[关键字]&#xff1a;最短路径[题目大意]&#xff1a;给定平面直角若干个矩形&#xff0c;计算(可经过其他矩形)两个矩形任意顶点间的最短路程费用。//[分析]&#xff1a;其实题目本事没有太大的难点&#xff0c;只需要对每两个点进行连…

Caffe Caffe2入门博客存档

caffe2 教程入门&#xff08;python版&#xff09; https://www.jianshu.com/p/5c0fd1c9fef9?fromtimeline caffe入门学习 https://blog.csdn.net/hjimce/article/details/48933813 运行caffe自带的两个简单例子 https://www.linuxidc.com/Linux/2016-11/136774p9.htm 关于caf…

JavaScript中不得不说的断言?

断言主要应用于“调试”与“测试” 一、前端中的断言 仔细地查找一下JavaScript中的API&#xff0c;实际上并没有多少关于断言的方法。唯一一个就是console.assert&#xff1a; // console.assert(condition, message)const a 1console.assert(typeof a number, a should be…