下面我们来配置下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代码

深入浅出的webpack4构建工具--webpack4+react构建环境(二十)的更多相关文章

  1. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  2. 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)

    阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...

  3. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  4. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

  5. 深入浅出的webpack构建工具---HappyPack优化构建(九)

    阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...

  6. 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)

    阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. ...

  7. yb课堂之压力测试工具Jmeter5.X 实战《二十二》

    目前常用的测试工具对比 LoadRunner 性能稳定,压测结果及细粒度大,可以自定义脚本进行压力,但是太过于重大,功能比较繁多 Apache AB(单接口压测最方便) 模拟多线程并发请求,ab命令对 ...

  8. 关于node.js和npm，cnpm的安装记录以及gulp自动构建工具的使用

    关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用   工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...

  9. 前端自动化构建工具——gulp

    gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到 ...

随机推荐

  1. CentOS配置VSFTP服务

    1.安装vsftpd a.查看是否安装vsftp [root@wsyjlly ~]# rpm -q vsftpd package vsftpd is not installed b.如果没有则安装vs ...

  2. Java 雇员管理小练习（理解面向对象编程）

    在学习集合框架的时候,初学者很容易练习到学生管理系统.雇员管理体统等练习题.在学习集合框架之前,基本上Java基本语法都学完了,集合框架也从侧面的检验对前面学习的理解.下面用一个曾经做过的练习题,回顾 ...

  3. 【Java并发编程】19、DelayQueue源码分析

    DelayQueue,带有延迟元素的线程安全队列,当非阻塞从队列中获取元素时,返回最早达到延迟时间的元素,或空(没有元素达到延迟时间).DelayQueue的泛型参数需要实现Delayed接口,Del ...

  4. 利用批处理文件删除系统托盘上的图标（适用于Windows各个版本）

    对于我这种强迫症患者来说,如果我已经删除了一些软件,但是系统托盘里面还有它,我会很难受.所以,没办法,必须想办法把它清除掉,还自己一片安宁!!!不知各位是否遇到过和我一样的问题,下面贴一段批处理文件的 ...

  5. python之变量与常量

    变量:把程序运行过程中产生的值,暂时存储在内存,方便后面的程序调用. 被引号括起来的内容是字符串,原样输出.#单行注释 用来标注代码信息,特点:被注释的内容不会被执行.Ctrl + /'''内容''' ...

  6. JMeter Sampler之BeanShellSampler的使用

    Sampler之BeanShellSampler的使用 by:授客 QQ:1033553122 欢迎加入软件性能测试交流群:7156436 1.  Bean Shell简介 ·         Bea ...

  7. 《Inside C#》笔记(三) 数据类型

    数据类型系统是一门编程语言的核心..NET系列的语言使用统一的数据类型系统CTS(Common Type System).所有的数据类型都继承自System.Object. 一 值类型和引用类型 a) ...

  8. 安卓开发之Room实体定义数据

    使用Room实体定义数据 在Room库中,entities(实体)代表着相关字段集.每一个entity(实体)代表着相关联数据库中的一个表.entity 类必须通过Database 类中的entiti ...

  9. 【转】如何将MySQL数据目录更改为CentOS 7上的新位置

    本文转载自:http://www.leftso.com/blog/362.html 介绍 数据库随着时间的推移而增长,有时超过了文件系统的空间.当它们与操作系统的其他部分位于同一分区上时,也可能遇到I ...

  10. etcd raft如何实现leadership transfer

    leadership transfer可以把raft group中的leader身份转给其中一个follower.这个功能可以用来做负载均衡,比如可以把leader放在性能更好的机器或者离客户端更近的 ...