下面我们来配置下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.jsxconst 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构建环境(二十)
原文地址：https://www.cnblogs.com/tugenhua0707/p/9823511.html