chore: Update simple example.

example/simple/.babelrc

@@ -1,26 +1,11 @@
 {
   "presets": [
-    [
-      "@babel/preset-env", {
-        "targets": {
-          "browsers": ["last 2 versions", "ie >= 10"]
-        }
-      }
-    ],
+    "@babel/preset-env",
     "@babel/preset-react"
   ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-async-to-generator",
-    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }],
-    [
-      "@babel/plugin-transform-runtime", {
-        "corejs": false,
-        "helpers": true,
-        "regenerator": true,
-        "useESModules": false
-      }
-    ]
+    "@babel/plugin-transform-async-to-generator"
   ]
 }

example/simple/scripts/conf/path.js → example/simple/config/paths.js

@@ -1,18 +1,24 @@
-
-
 const path = require('path');
 const fs = require('fs');
 
+
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
 
+console.log('>>>', path.resolve(__dirname, '../public'))
+console.log('>>>222', resolveApp('public'))
+
 module.exports = {
-  appBuildDist: resolveApp('dist'),
+  // Source files
+  src: resolveApp('src'),
+
+  // Production build files
+  build: resolveApp('dist'),
+
+  // Static files that get copied to build folder
+  public: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
-  // appFavicon: resolveApp('public/favicon.png'),
   appFavicon: resolveApp('public/favicon.ico'),
-  appSrc: resolveApp('src'),
-}
+};

example/simple/config/webpack.common.js

@@ -0,0 +1,35 @@
+const paths = require('./paths');
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  // Where webpack looks to start building the bundle
+  entry: [`${paths.src}/index.js`],
+
+  // Where webpack outputs the assets and bundles
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+  },
+
+  // Customize the webpack build process
+  plugins: [
+    // Removes/cleans build folders and unused assets when rebuilding
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      favicon: paths.appFavicon,
+      inject: true,
+      template: paths.appHtml,
+    }),
+  ],
+
+  // Determine how modules within the project are treated
+  module: {
+    rules: [
+      // JavaScript: Use Babel to transpile JavaScript files
+      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
+    ],
+  },
+};

example/simple/config/webpack.dev.js

@@ -0,0 +1,25 @@
+const paths = require('./paths')
+
+const webpack = require('webpack')
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+  // Control how source maps are generated
+  devtool: 'inline-source-map',
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    contentBase: paths.build,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8082,
+  },
+  plugins: [
+    // Only update what has changed on hot reload
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+})

example/simple/config/webpack.prod.js

@@ -0,0 +1,28 @@
+const paths = require('./paths');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: false,
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+  optimization: {
+    minimize: true,
+    minimizer: ["..."],
+    // Once your build outputs multiple chunks, this option will ensure they share the webpack runtime
+    // instead of having their own. This also helps with long-term caching, since the chunks will only
+    // change when actual code changes, not the webpack runtime.
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+})