webpack

config/webpack.common.config.js

@@ -9,7 +9,8 @@ module.exports = {
     filename: 'js/bundle.js',
     path: path.resolve(__dirname, '../dist'),
   },
-  devtool: 'source-map',
+  // devtool: 'source-map',
+  devtool: 'cheap-module-eval-source-map',
   resolve: {
     // Add '.ts' and '.tsx' as resolvable extensions.
     extensions: ['.ts', '.tsx', '.js', '.json'],
@@ -54,6 +55,12 @@ module.exports = {
           },
         },
       },
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      /*  {
+        enforce: 'pre',
+        test: /\.js$/,
+        loader: 'source-map-loader',
+      }, */
     ],
   },
 };

config/webpack.prod.config.js

@@ -6,11 +6,11 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-
+const TerserPlugin = require('terser-webpack-plugin');
 module.exports = merge(common, {
   mode: 'production',
   output: {
-    filename: 'js/[name].[chunkhash:8].bundle.js',
+    filename: 'js/[name].[chunkhash:8].js',
   },
   module: {
     rules: [
@@ -65,6 +65,47 @@ module.exports = merge(common, {
         },
         canPrint: true,
       }),
+      // This is only used in production mode
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            // We want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minification steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending further investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          // Added for profiling in devtools
+          keep_classnames: true,
+          keep_fnames: true,
+          output: {
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
+          },
+        },
+        sourceMap: true,
+      }),
     ],
     splitChunks: {
       chunks: 'all',

src/app.less

@@ -1,16 +1,16 @@
 @import '~antd/dist/antd.css';
 .App {
   height: 300px;
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
-  // background-color: lightcoral;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: lightcoral;
   h1 {
     font-size: 16px;
     color: #fff;
   }
   .background {
-    // position: absolute;
+    position: absolute;
     width: 100%;
     left: 0;
     top: -124px;