chore(�): config balel and webpack

Author: sunss

.eslintrc.js

@@ -21,10 +21,12 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
+    createDefaultProgram: true,
     ecmaFeatures: {
       jsx: true,
     },
-    // project: './tsconfig.eslint.json',
+    project: './tsconfig.eslint.json',
+    // project: {},
   },
   rules: {
     'jsx-no-lambda': 0,
@@ -46,7 +48,7 @@ module.exports = {
     'no-submodule-imports': 0,
     'no-case-declarations': 1,
     '@typescript-eslint/no-empty-function': 0,
-    '@typescript-eslint/ban-ts-ignore': 1,
+    // '@typescript-eslint/ban-ts-ignore': 1,
     '@typescript-eslint/indent': 0,
     'jsx-alignment': 0,
     'jsx-wrap-multiline': 0,
@@ -107,8 +109,8 @@ module.exports = {
     'react/require-extension': 0,
     'react/self-closing-comp': 0,
     'react/sort-comp': 0,
-    'redux-saga/no-yield-in-race': 2,
-    'redux-saga/yield-effects': 2,
+    // 'redux-saga/no-yield-in-race': 2,
+    // 'redux-saga/yield-effects': 2,
     'require-yield': 0,
   },
   settings: {
@@ -117,7 +119,7 @@ module.exports = {
     },
     'import/resolver': {
       webpack: {
-        config: './internals/webpack/webpack.prod.babel.js',
+        config: './config/webpack.base.js',
       },
       typescript: {
         alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`

babel.config.js

@@ -1,3 +1,6 @@
+const { argv } = require('yargs');
+const isDev = argv.mode === 'development';
+
 module.exports = {
   presets: [
     [
@@ -16,14 +19,27 @@ module.exports = {
     '@babel/preset-typescript',
   ],
   plugins: [
-    'react-hot-loader/babel',
+    'lodash',
+    '@babel/plugin-transform-runtime',
     // 'babel-plugin-styled-components',
+    // '@babel/plugin-transform-react-inline-elements',
+    // '@babel/plugin-transform-react-constant-elements',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-syntax-dynamic-import',
-  ],
+    'react-hot-loader/babel',
+    isDev && [
+      'import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true, // or 'css'
+      },
+      'antd',
+    ],
+  ].filter(Boolean),
   env: {
     production: {
-      only: ['app'],
+      // only: ['app'],
       plugins: [
         'lodash',
         'transform-react-remove-prop-types',

config/webpack.base.js

@@ -8,7 +8,7 @@ module.exports = {
   entry: './src/index.tsx',
   output: {
     path: path.resolve(__dirname, '..dist'),
-    // filename: '[name].[contenthash].js',
+    filename: '[name].[contenthash].js',
     publicPath: '',
   },
   module: {

config/webpack.dev.js

@@ -29,7 +29,8 @@ const devConfig = {
 
   devServer: {
     port: 3000,
-    contentBase: '../dist',
+    // contentBase: '../dist',
+    publicPath: '/',
     open: true,
     hot: true,
     historyApiFallback: true,

package.json

@@ -62,6 +62,7 @@
     "@typescript-eslint/parser": "^4.29.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-import": "^1.13.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
@@ -107,7 +108,8 @@
     "webpack-dev-middleware": "^5.0.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-pwa-manifest": "^4.3.0"
+    "webpack-pwa-manifest": "^4.3.0",
+    "yargs": "^17.1.0"
   },
   "resolutions": {
     "babel-loader": "8.2.2"

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { Switch, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import { Button, Empty, Space } from 'antd';
 import HomePage from './pages/Home';
 import AboutPage from './pages/About';
@@ -10,31 +10,33 @@ import { hot } from 'react-hot-loader/root';
 function App() {
   return (
     <HelmetProvider>
-      <div className="app">
-        <Helmet titleTemplate="%s - webpack-react-typescript" defaultTitle="React App">
-          <meta name="description" content="a webpack5.x + react + typescript practices" />
-        </Helmet>
+      <Router>
+        <div className="app">
+          <Helmet titleTemplate="%s - webpack-react-typescript" defaultTitle="React App">
+            <meta name="description" content="a webpack5.x + react + typescript practices" />
+          </Helmet>
 
-        <h1>欢迎使用 webpack-react-typescript 模板</h1>
-        <Space align="center" size={60}>
-          <Link to="/">
-            <Button>HomePage</Button>
-          </Link>
-          <Link to="/about">
-            <Button type="primary">AboutPage</Button>
-          </Link>
-        </Space>
+          <h1>欢迎使用 webpack-react-typescript 模板</h1>
+          <Space size={60}>
+            <Link to="/">
+              <Button>HomePage</Button>
+            </Link>
+            <Link to="/about">
+              <Button type="primary">AboutPage</Button>
+            </Link>
+          </Space>
 
-        {/* Roues */}
-        <Switch>
-          <Route exact path="/" component={HomePage} />
-          <Route path="/about" component={AboutPage} />
-          <Route render={() => <Empty />} />
-        </Switch>
+          {/* Roues */}
+          <Switch>
+            <Route exact path="/" component={HomePage} />
+            <Route path="/about" component={AboutPage} />
+            <Route render={() => <Empty />} />
+          </Switch>
 
-        <img src={logo} alt="" style={{ width: 400, height: 400 }} />
-        <h4>a webpack5.x + react + typescript practices</h4>
-      </div>
+          <img src={logo} alt="" style={{ width: 400, height: 400 }} />
+          <h4>a webpack5.x + react + typescript practices</h4>
+        </div>
+      </Router>
     </HelmetProvider>
   );
 }

src/index.tsx

@@ -3,14 +3,15 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import './index.less';
 
-const MOUNT_NODE = document.getElementById('app') as HTMLElement;
+// const MOUNT_NODE = document.getElementById('app') as HTMLElement;
 
-if (module.hot) {
-  // Hot reloadable translation json files
-  // modules.hot.accept does not accept dynamic dependencies,
-  // have to be constants at compile-time
-  module.hot.accept([], () => {
-    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
-    ReactDOM.render(<App />, document.getElementById('root'));
-  });
-}
+ReactDOM.render(<App />, document.getElementById('root'));
+// if (module.hot) {
+//   // Hot reloadable translation json files
+//   // modules.hot.accept does not accept dynamic dependencies,
+//   // have to be constants at compile-time
+//   module.hot.accept([], () => {
+//     ReactDOM.unmountComponentAtNode(MOUNT_NODE);
+//     ReactDOM.render(<App />, document.getElementById('root'));
+//   });
+// }

yarn.lock

@@ -205,7 +205,7 @@
   dependencies:
     "@babel/types" "^7.15.0"
 
-"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
   integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
@@ -1006,7 +1006,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
   integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
@@ -2444,6 +2444,14 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7"
+  integrity sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-lodash@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz#4f6844358a1340baed182adbeffa8df9967bc196"
@@ -9214,7 +9222,7 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
-yargs@^17.0.0:
+yargs@^17.0.0, yargs@^17.1.0:
   version "17.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.1.0.tgz#0cd9827a0572c9a1795361c4d1530e53ada168cf"
   integrity sha512-SQr7qqmQ2sNijjJGHL4u7t8vyDZdZ3Ahkmo4sc1w5xI9TBX0QDdG/g4SFnxtWOsGLjwHQue57eFALfwFCnixgg==