diff --git a/CHANGELOG.md b/CHANGELOG.md
index 998c2352..037d9eec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ 增加react配置 | [76c0fe1](https://github.com/luoxue-victor/learn_webpack/commit/76c0fe1), closes [#8](https://github.com/luoxue-victor/learn_webpack/issues/8)
  dist | 删除dist | [9600d82](https://github.com/luoxue-victor/learn_webpack/commit/9600d82)
  packages | 新加cli跟utils包 | [0828922](https://github.com/luoxue-victor/learn_webpack/commit/0828922)
 
diff --git a/config/babelLoader.js b/config/babelLoader.js
index 2b98ed36..1d85fc33 100644
--- a/config/babelLoader.js
+++ b/config/babelLoader.js
@@ -1,5 +1,5 @@
 // [babel-loader 配置]
-module.exports = ({ config, resolve, tsx }) => {
+module.exports = ({ config }) => {
   const babelConf = {
     env: {
       test: {
@@ -32,12 +32,6 @@ module.exports = ({ config, resolve, tsx }) => {
     ]
   }
 
-  if (tsx) {
-    babelConf.presets[1].pop()
-    babelConf.presets.push('@babel/preset-react')
-    babelConf.plugins.shift()
-  }
-
   const baseRule = config.module.rule('babel').test(/.[jt]sx?$/)
   return () => {
     baseRule
diff --git a/packages/react/index.js b/packages/react/index.js
index 4d64083d..e69de29b 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -1,59 +0,0 @@
-// import React from 'react';
-// export default class App extends React.Component{
-//     render() {
-//         return (
-//             <div>
-//                 Hello, World!
-//             </div>
-//         )
-//     }
-// }
-
-import React, { useState, useReducer } from 'react'
-
-const myReducer = (state, action) => {
-  console.log(action, 'action')
-  console.log(state, 'state')
-  switch (action.type) {
-    case ('countUp'):
-      return {
-        ...state,
-        count: action.count
-      }
-    default:
-      return state
-  }
-}
-
-const arr = [[{ a: 1 }], [{ a: 4 }, { a: 5 }, { a: 6 }], [{ a: 7 }, { a: 8 }]]
-const item = arr.map((cur, index) => {
-  return <div key={index.toString()} style={{ margin: '20px', backgroundColor: 'cyan' }}>
-    {
-      cur.map((item, idx) => {
-        return <p key={idx.toString()}>{item.a}</p>
-      })
-    }
-  </div>
-})
-
-export const App = () => {
-  const [btnText, setBtnText] = useState('Click me, please')
-  const [state, dispatch] = useReducer(myReducer, { count: 0 })
-
-  function handleClick() {
-    return setBtnText(btnText === 'Click me, please' ? 'Thanks, been clicked!' : 'Click me, please')
-  }
-
-  return <div>
-    <button onClick={handleClick}>{btnText}</button>
-    <div>
-      <button onClick={() => dispatch({ type: 'countUp', count: state.count + 1 })}>
-                +1
-      </button>
-      <p>Count: {state.count}</p>
-    </div>
-    <div style={{ display: 'flex' }}>
-      {item}
-    </div>
-  </div>
-}
diff --git a/src/main.js b/src/main.js
index 7eb57172..ab00fb8f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,29 +1,21 @@
-// import TS from './ts/index.ts'
+// tree-shaking
 import { cube } from '@src/treeShaking'
-import { App } from '../packages/react/index'
-import React from 'react'
-import ReactDom from 'react-dom'
-
+console.log(cube(2))
+// 动态加载ts
 import('@src/ts/index.ts').then(res => {
   console.log(res)
-  // eslint-disable-next-line new-cap
-  new res.default()
 })
-require('./style/index.css')
-require('./style/app.css')
-require('./style/index.less')
-require('./style/index.scss')
-import('./style/index.postcss')
-require('react')
+// 加载图片
 const myPubPic = require('./assets/my-pub.jpeg')
-ReactDom.render(<App/>, document.getElementById('app'))
+// 测试环境变量
 if (process.env.NODE_ENV === 'production') {
   console.log('Welcome to production')
 }
-console.log(cube(2))
-console.log(myPubPic)
-
+// 加载样式
+require('./style')
 const h2 = document.createElement('h2')
 h2.className = 'test'
 h2.innerText = 'webpack 5'
 document.body.append(h2)
+// 加载react
+require('./react')
diff --git a/src/react/index.js b/src/react/index.js
new file mode 100644
index 00000000..e272c770
--- /dev/null
+++ b/src/react/index.js
@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import { App } from './template'
+
+ReactDom.render(<App/>, document.getElementById('app'))
diff --git a/src/react/template/index.js b/src/react/template/index.js
new file mode 100644
index 00000000..294e9aec
--- /dev/null
+++ b/src/react/template/index.js
@@ -0,0 +1,48 @@
+import React, { useState, useReducer } from 'react'
+
+const myReducer = (state, action) => {
+  console.log(action, 'action')
+  console.log(state, 'state')
+  switch (action.type) {
+    case ('countUp'):
+      return {
+        ...state,
+        count: action.count
+      }
+    default:
+      return state
+  }
+}
+
+const arr = [[{ a: 1 }], [{ a: 4 }, { a: 5 }, { a: 6 }], [{ a: 7 }, { a: 8 }]]
+const item = arr.map((cur, index) => {
+  return <div key={index.toString()} style={{ margin: '20px', backgroundColor: 'cyan' }}>
+    {
+      cur.map((item, idx) => {
+        return <p key={idx.toString()}>{item.a}</p>
+      })
+    }
+  </div>
+})
+
+export const App = () => {
+  const [btnText, setBtnText] = useState('Click me, please')
+  const [state, dispatch] = useReducer(myReducer, { count: 0 })
+
+  function handleClick() {
+    return setBtnText(btnText === 'Click me, please' ? 'Thanks, been clicked!' : 'Click me, please')
+  }
+
+  return <div>
+    <button onClick={handleClick}>{btnText}</button>
+    <div>
+      <button onClick={() => dispatch({ type: 'countUp', count: state.count + 1 })}>
+                +1
+      </button>
+      <p>Count: {state.count}</p>
+    </div>
+    <div style={{ display: 'flex' }}>
+      {item}
+    </div>
+  </div>
+}
diff --git a/src/style/index.js b/src/style/index.js
new file mode 100644
index 00000000..64f85a6a
--- /dev/null
+++ b/src/style/index.js
@@ -0,0 +1,5 @@
+require('./index.css')
+require('./app.css')
+require('./index.less')
+require('./index.scss')
+import('./index.postcss')