feat(react): 增加react并规范了目录

CHANGELOG.md

@@ -14,18 +14,14 @@
  src/react | 修改样式 | [e990865](https://github.com/luoxue-victor/learn_webpack/commit/e990865)
 
 
-### 🎨 代码样式
-范围|描述|commitId
---|--|--
- src/react | 修改样式 | [e990865](https://github.com/luoxue-victor/learn_webpack/commit/e990865)
-
-
 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
  demo | 修改demo | [86da5a4](https://github.com/luoxue-victor/learn_webpack/commit/86da5a4)
  gitignore | 增加dist | [d723459](https://github.com/luoxue-victor/learn_webpack/commit/d723459)
+ merge | 合并master | [6886aef](https://github.com/luoxue-victor/learn_webpack/commit/6886aef)
  src + packages/react | 调整了文件位置 | [02bcb12](https://github.com/luoxue-victor/learn_webpack/commit/02bcb12)
+ src/react | 增加antd和样式修改 | [1c9b1ab](https://github.com/luoxue-victor/learn_webpack/commit/1c9b1ab)
 
 
 ### 📝 文档
@@ -40,6 +36,11 @@
  cli | 改造脚手架提供，packages内可以直接注册webpack配置跟脚手架命令 | [f340e6f](https://github.com/luoxue-victor/learn_webpack/commit/f340e6f)
  packages/cli | 修改了脚手架配置 | [578b687](https://github.com/luoxue-victor/learn_webpack/commit/578b687)
 
+
+### 💡 不兼容变更
+
+* **src/react：** less 需要更换版本
+
 ## [1.0.1](https://github.com/luoxue-victor/learn_webpack/compare/18fbebf...v1.0.1) (2019-12-18)
 
 范围|描述|commitId

README.md

@@ -47,6 +47,7 @@
 - [课时 21：增加 GraphQL Server](./docs/课时-21.md)
 - [课时 22：开启 mock](./docs/课时-22.md)
 - [课时 23：编写插件](./docs/课时-23.md)
+- [课时 24：配置 react](./docs/课时-24.md)
 
 </details> 
 
@@ -145,6 +146,8 @@ webpack-box server:gql # graphql-server
 - [设置 style 全局变量](./config/styleResourcesLoader.js)
 - [多线程配置](./config/threadLoader.js)
 - [tslint 配置](./config/tslintPlugin.js)
+- [[cli 配置]](./packages/cli/webpack-chain.config.js)
+- [[react 配置]](./packages/react/webpack-chain.config.js)
 
 </details> 
 
@@ -190,7 +193,7 @@ module.exports = function (config) {
     port: 8888,
     mock: true,
     env: {
-      MY_ENV: 'my-env'
+      REACT: 'react' // 配置 react
     },
     alias: {
       '@': resolve('src'),
@@ -252,8 +255,7 @@ module.exports = function (config) {
         filename: 'index2.html'
       }
     },
-    chainWebpack(config) {
-    }
+    chainWebpack(config) {}
   }
 }
 

box.config.js

@@ -28,7 +28,7 @@ module.exports = function (config) {
     port: 8888,
     mock: true,
     env: {
-      MY_ENV: 'my-env'
+      REACT: 'react' // 配置 react
     },
     alias: {
       '@': resolve('src'),
@@ -90,7 +90,6 @@ module.exports = function (config) {
         filename: 'index2.html'
       }
     },
-    chainWebpack(config) {
-    }
+    chainWebpack(config) {}
   }
 }

build/base.js

@@ -15,7 +15,7 @@ module.exports = (options) => {
   const { getConfigsByName } = require('../util/getLocalConfigByPath')
   const configs = []
   files.forEach(fileName => configs.push(require(`${configPath}/${fileName}`)))
-  configs.push(...getConfigsByName('packages', 'chain.config.js'))
+  configs.push(...getConfigsByName('packages', 'webpack-chain.config.js'))
   configs.forEach(c => c({
     config,
     webpackVersion,

config/EnvironmentPlugin.js

@@ -1,7 +1,7 @@
 // [EnvironmentPlugin 定义通用变量]
 const webpack = require('webpack')
 
-module.exports = ({ config, resolve, options }) => {
+module.exports = ({ config, options }) => {
   return () => {
     const resolveClientEnv = require('../util/resolveClientEnv')
     config

config/babelLoader.js

@@ -1,29 +1,27 @@
 // [babel-loader 配置]
 module.exports = ({ config }) => {
+  const presets = [
+    ['@babel/typescript'],
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        targets: {
+          chrome: 59,
+          edge: 13,
+          firefox: 50,
+          safari: 8
+        }
+      }
+    ]
+  ]
   const babelConf = {
     env: {
       test: {
         plugins: ['@babel/plugin-transform-modules-commonjs']
       }
     },
-    presets: [
-      ['@babel/typescript'],
-      [
-        '@babel/preset-react',
-        {
-          corejs: '3',
-          useBuiltIns: 'usage',
-          loose: true,
-          modules: false,
-          targets: {
-            chrome: 59,
-            edge: 13,
-            firefox: 50,
-            safari: 8
-          }
-        }
-      ]
-    ],
+    presets,
     plugins: [
       'transform-class-properties',
       '@babel/proposal-object-rest-spread',
@@ -39,5 +37,6 @@ module.exports = ({ config }) => {
       .use('babel')
       .loader(require.resolve('babel-loader'))
       .options(babelConf)
+      .after('process-env')
   }
 }

docs/课时-24.md

@@ -0,0 +1 @@
+## 课时 24：配置 react

packages/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'))

packages/react/template/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import './index.scss'
+
+export const App = () => {
+  return (
+    <div className="react-box">
+      <h1>React Demo</h1>
+      <img className="react-logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K" alt=""/>
+    </div>
+  )
+}

src/react/template/index.scss → packages/react/template/index.scss

@@ -1,28 +1,15 @@
-.box {
+.react-box {
   width: 100%;
   text-align: center;
 }
 
-.logo {
+.react-logo {
   width: 100px;
   height: 100px;
   animation: rotating 5s linear infinite;
 }
 
-.btnBox {
-  width: 100%;
-  text-align: center;
-}
-
-.listBox {
-  width: 90%;
-  border-radius: 4px;
-  overflow: hidden;
-  margin: 0 auto;
-  border: 1px solid #dfdfdf;
-}
-
-@-webkit-keyframes rotating {
+@keyframes rotating {
   0% {
     transform: rotate(0deg);
   }