深入浅出的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

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

【Groovy】构建工具 ( 构建工具引入 | Gradle 构建工具作用 | 传统的依赖管理 )
文章目录一.构建工具引入二.Gradle 构建工具作用三.传统的依赖管理一.构建工具引入构建工具用于管理代码项目的依赖 , 编译 , 测试 , 发布周期 ; 常见的构建工具 : An ...
react 组件构建_为React构建星级评定组件
react 组件构建 Who doesn't love beer? When you drink a great beer you want to tell someone. You definite ...
python 项目构建工具_python的构建工具setup.py
一.构建工具setup.py的应用场景在安装python的相关模块和库时,我们一般使用 "pip install 模块名" 或者 "python setup.py in ...
python自动化构建工具_Python自动化构建工具scons使用入门笔记
这段时间用到了scons,这里总结下,也方便我以后查阅. 一.安装sconsLinux环境(以CentOS为例) 1.yum安装 yum install scons 2.源码安装下载scons:ht ...
构建工具篇 - react 的 yarn eject 构建命令都做了什么
前言前段时间,一直在研究 react 技术栈,对于项目的构建方面,又有一定的特殊需求,通过 npx create-react-app [filename] 安装以后,发现没有 webpack 相关的 ...
深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
CYQ.Data 轻量数据层之路使用篇-辅助工具枚举生成器视频 C (二十)
说明: 本次录制主要为使用篇:CYQ.Data 轻量数据层之路优雅V1.4 辅助工具(十) 的附加视频教程. 本次视频介绍了使用工具创建存储过程/生成日志表/生成枚举文件等相关操作,同时以示例实 ...
react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
【React工作记录二十四】ant design form赋值问题
目录前言导语解决思路总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大 ...

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

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

最新文章

热门文章