深入浅出的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 后 打包，运行如何，可以看到基本配置好了。
深入浅出的webpack4构建工具--webpack4+react构建环境(二十)的更多相关文章
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- 深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
- 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)
阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. ...
- yb课堂之压力测试工具Jmeter5.X 实战《二十二》
目前常用的测试工具对比 LoadRunner 性能稳定,压测结果及细粒度大,可以自定义脚本进行压力,但是太过于重大,功能比较繁多 Apache AB(单接口压测最方便) 模拟多线程并发请求,ab命令对 ...
- 关于node.js和npm，cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
- 前端自动化构建工具——gulp
gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...
随机推荐
- ServiceFramework作为Java Web框架都有哪些不错的设计
前言 最近需要开发一个纯API的项目,mlsql-cluster,从无到有,到最后完整的proxy功能开发完毕,只花了四个小时不到,自己不尽小感叹了一把 ServiceFramework的高效. 关于 ...
- CSS之设置滚动条样式
因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...
- 遇到了ImportError: libmysqlclient_r.so.16: cannot open shared object file: No such file or directory
解决方法如下: 1. 通过命令查找libmysqlclient_r.so.16 在什么地方,一般是在/usr/lib64/mysql/下面 2. 做一个链接到/usr/lib64 下: ln -s / ...
- Sharepoint 2013 Gatherer 数据库的架构版本低于此 Gatherer 应用程序支持的向后兼容的最低架构版本
管理中心 ->升级和迁移 ->查看数据库状态 解决方法: 开始-运行(以管理员身份运行),输入如下命令. cd C:\Program Files\Common Files\Microso ...
- Landsat8 卫星数据下载
具体参考 https://www.ixxin.cn/2016/11/27/landsat8freedata/
- C++ UTF8 UrlEncode（宽字符）
为了支持C++ UrlEncode之后的字符串能够被C#所识别(windows phone 下C#只能支持UTF8与 Unicode). 所谓的 UTF8 UrlEncode 也只是宽字符串 UrlE ...
- Java:构造代码块，静态代码块
本文内容: 局部代码块 构造代码块 静态代码块 补充 首发日期:2018-03-28 局部代码块: 局部代码块用于限制变量的生命周期,如果希望某些变量在某一过程之后直接失效而不希望被后面继续操作时,可 ...
- [20171120]关于INBOUND_CONNECT_TIMEOUT设置.txt
[20171120]关于INBOUND_CONNECT_TIMEOUT设置.txt --//上午翻看以前我的发的帖子,发现链接:http://www.itpub.net/thread-2066758- ...
- python第四十一天---作业:简单FTP
作业要示: 开发简单的FTP:1. 用户登陆2. 上传/下载文件3. 不同用户家目录不同4. 查看当前目录下文件5. 充分使用面向对象知识 REDMAE 用户登陆 1.查看用户目录文件 2.上传文 ...
- C#语言————第二章 C#语言快速热身
第二章 C#语言快速热身 ***********一.选择结构**************** 1:if选择结构与java的if选择结构语法完全相同 2:switch选择结构 ①:常量表达式的值可 ...