@wang1212/create-web-app - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

package.json

 {
 	"name": "@wang1212/create-web-app",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"keywords": [
@@ -5,0 +5,0 @@ "web-app",

packages/app/.babelrc.js

@@ -8,7 +8,7 @@ module.exports = {
 				isTSX: true,
-				allExtensions: true
-			}
-		]
+				allExtensions: true,
+			},
+		],
 	],
-	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread']
+	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
 }

packages/app/config/webpack.config.js

@@ -7,3 +7,3 @@ /* eslint-disable */
 
-const app_info = require('../public/manifest.json')
+const appInfo = require('../public/manifest.json')
 
@@ -15,27 +15,91 @@ // tool
 // webpack plugins
-const CopyWebpackPlugin = require('copy-webpack-plugin'),
-	HtmlWebpackPlugin = require('html-webpack-plugin'),
-	UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
-	MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-	OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
-	BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
-	WorkboxPlugin = require('workbox-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const WorkboxPlugin = require('workbox-webpack-plugin')
+const postcssNormalize = require('postcss-normalize')
 
-module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, is_dev = NODE_ENV === 'development' }) => ({
-	mode: NODE_ENV,
+module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development', isEnvProduction = !isEnvDevelopment }) => ({
+	mode: isEnvDevelopment ? 'development' : 'production',
+	// Stop compilation early in production
+	bail: isEnvProduction,
 	target: 'web',
-	devtool: is_dev ? 'cheap-module-eval-source-map' : 'none',
+	devtool: isEnvDevelopment ? 'cheap-module-eval-source-map' : 'none',
 	watch: true,
 	watchOptions: {
-		ignored: /node_modules/
+		ignored: /node_modules/,
 	},
 	context: path.resolve(__dirname, '../'),
 	entry: {
-		app: SRC_DIR + 'app.js'
+		app: SRC_DIR + 'index.js',
 	},
 	output: {
+		// The build folder.
 		path: BUILD_DIR,
-		filename: is_dev ? '[name].js' : '[name].[chunkhash].js',
-		chunkFilename: is_dev ? '[name].js' : '[name].[chunkhash].js'
+		filename: isEnvDevelopment ? '[name].js' : '[name].[contenthash:8].js',
+		// TODO: remove this when upgrading to webpack 5
+		futureEmitAssets: true,
+		// There are also additional JS chunk files if you use code splitting.
+		chunkFilename: isEnvDevelopment ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
+		// https://webpack.js.org/configuration/output/#outputpublicpath
+		// publicPath: ''
+		// Point sourcemap entries to original disk location (format as URL on Windows)
+		devtoolModuleFilenameTemplate: isEnvProduction
+			? (info) => path.relative(SRC_DIR, info.absoluteResourcePath).replace(/\\/g, '/')
+			: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+		// this defaults to 'window', but by setting it to 'this' then
+		// module chunks which are built will work in web workers as well.
+		globalObject: 'this',
 	},
+	optimization: {
+		minimize: isEnvProduction,
+		minimizer: [
+			// This is only used in production mode
+			new TerserPlugin({
+				terserOptions: {
+					mangle: {
+						safari10: true,
+					},
+					output: {
+						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,
+					},
+				},
+			}),
+			// This is only used in production mode
+			new OptimizeCSSAssetsPlugin({
+				cssProcessorOptions: {
+					parser: safePostCssParser,
+				},
+				cssProcessorPluginOptions: {
+					preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+				},
+			}),
+		],
+		// Automatically split vendor and commons
+		splitChunks: {
+			chunks: 'all',
+			name: false,
+		},
+		// Keep the runtime chunk separated to enable long term caching
+		// https://github.com/facebook/create-react-app/issues/5358
+		runtimeChunk: {
+			name: (entrypoint) => `runtime-${entrypoint.name}`,
+		},
+	},
+	resolve: {
+		extensions: ['.ts', '.js', '.mjs', '.json'],
+		alias: {
+			components: path.resolve('./src/components/'),
+			utils: path.resolve('./src/utils/'),
+			vendors: path.resolve('./src/vendors/'),
+		},
+	},
 	module: {
@@ -48,8 +112,8 @@ rules: [
 					{
-						loader: 'worker-loader'
-					}
-				]
+						loader: 'worker-loader',
+					},
+				],
 			},
 			{
-				test: /\.[tj]sx?$/i,
+				test: /\.([tj]s|mjs)$/i,
 				exclude: /node_modules/,
@@ -60,6 +124,10 @@ use: [
 						options: {
-							cacheDirectory: true
-						}
-					}
-				]
+							// This is a feature of `babel-loader` for webpack (not Babel itself).
+							// It enables caching results in ./node_modules/.cache/babel-loader/
+							// directory for faster rebuilds.
+							cacheDirectory: true,
+							compact: isEnvProduction,
+						},
+					},
+				],
 			},
@@ -70,9 +138,9 @@ {
 				use: [
-					is_dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+					isEnvDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
 					{
 						loader: 'css-loader',
 						options: {
-							sourceMap: is_dev,
-							importLoaders: 2
-						}
+							sourceMap: isEnvDevelopment,
+							importLoaders: 2,
+						},
 					},
@@ -82,9 +150,25 @@ {
 						options: {
-							sourceMap: is_dev,
+							sourceMap: isEnvDevelopment,
+							// Necessary for external CSS imports to work
+							// https://github.com/facebook/create-react-app/issues/2677
 							ident: 'postcss',
-							plugins: () => [require('postcss-preset-env')]
-						}
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								require('postcss-preset-env')({
+									autoprefixer: {
+										flexbox: 'no-2009',
+									},
+									stage: 3,
+								}),
+								// Adds PostCSS Normalize as the reset css with default options,
+								// so that it honors browserslist config in package.json
+								// which in turn let's users customize the target behavior as per their needs.
+								postcssNormalize(),
+							],
+						},
 					},
-					'sass-loader'
-				]
+					'sass-loader',
+				],
+				// See https://github.com/webpack/webpack/issues/6571
+				sideEffects: true,
 			},
@@ -98,9 +182,9 @@ {
 						options: {
-							attrs: ['img:src', 'img:data-src']
-						}
-					}
-				]
+							attributes: ['img:src', 'img:data-src'],
+						},
+					},
+				],
 			},
 			{
-				test: /\.(gif|png|jpe?g|svg)$/i,
+				test: /\.(bmp|gif|png|jpe?g|svg)$/i,
 				exclude: /node_modules/,
@@ -111,4 +195,4 @@ use: [
 						options: {
-							limit: 8192
-						}
+							limit: 8192,
+						},
 					},
@@ -118,25 +202,25 @@ {
 						options: {
-							disable: is_dev,
+							disable: isEnvDevelopment,
 							mozjpeg: {
 								progressive: true,
-								quality: 65
+								quality: 65,
 							},
 							optipng: {
-								enabled: false
+								enabled: false,
 							},
 							pngquant: {
 								quality: [0.65, 0.9],
-								speed: 4
+								speed: 4,
 							},
 							gifsicle: {
-								interlaced: false
+								interlaced: false,
 							},
 							webp: {
-								quality: 75
-							}
-						}
-					}
-				]
-			}
-		]
+								quality: 75,
+							},
+						},
+					},
+				],
+			},
+		],
 	},
@@ -146,3 +230,3 @@ plugins: [
 			context: '.',
-			manifest: path.join(BUILD_DIR, './vendor-manifest.json')
+			manifest: path.join(BUILD_DIR, './vendor-manifest.json'),
 		}),
@@ -154,3 +238,3 @@ new CopyWebpackPlugin([
 				flatten: true,
-				cache: true
+				cache: true,
 			},
@@ -160,95 +244,66 @@ {
 				to: './vendors',
-				cache: true
-			}
+				cache: true,
+			},
 		]),
 		new HtmlWebpackPlugin({
-			chunks: ['app', 'commons'],
+			chunks: ['app'],
 			filename: 'index.html',
 			template: './public/index.ejs',
 			templateParameters: {
-				title: app_info.name,
-				description: app_info.description,
+				title: appInfo.name,
+				description: appInfo.description,
 				favicon: 'favicon.ico',
 				manifest: 'manifest.json',
-				vendor: 'vendor.js'
-			}
+				vendor: 'vendor.js',
+			},
 		}),
-		new MiniCssExtractPlugin({
-			filename: is_dev ? '[name].css' : '[name].[hash].css',
-			chunkFilename: is_dev ? '[id].css' : '[id].[hash].css'
-		}),
+		// This is necessary to emit hot updates (currently CSS only):
+		isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+		// File systems of different operating systems handle case differently, forcing case sensitivity
+		isEnvDevelopment && new CaseSensitivePathsPlugin(),
+		isEnvProduction &&
+			new MiniCssExtractPlugin({
+				filename: '[name].[contenthash:8].css',
+				chunkFilename: '[name].[contenthash:8].chunk.css',
+			}),
 		new BundleAnalyzerPlugin(),
-		new WorkboxPlugin.GenerateSW({
-			maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
-			additionalManifestEntries: [
-				{ url: 'vendor-manifest.json', revision: app_info._version },
-				{ url: 'vendor.js', revision: app_info._version }
-			],
-			runtimeCaching: [
-				{
-					urlPattern: /^https:\/\/fonts\.googleapis\.com/,
-					handler: 'StaleWhileRevalidate',
-					options: {
-						cacheName: 'google-fonts-stylesheets'
-					}
-				},
-				{
-					urlPattern: /^https:\/\/fonts\.gstatic\.com/,
-					handler: 'CacheFirst',
-					options: {
-						cacheName: 'google-fonts-webfonts',
-						cacheableResponse: {
-							statuses: [0, 200]
+		isEnvProduction &&
+			new WorkboxPlugin.GenerateSW({
+				clientsClaim: true,
+				exclude: [/\.map$/, /asset-manifest\.json$/],
+				maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
+				additionalManifestEntries: [
+					{ url: 'vendor-manifest.json', revision: appInfo._version },
+					{ url: 'vendor.js', revision: appInfo._version },
+				],
+				runtimeCaching: [
+					{
+						urlPattern: /^https:\/\/fonts\.googleapis\.com/,
+						handler: 'StaleWhileRevalidate',
+						options: {
+							cacheName: 'google-fonts-stylesheets',
 						},
-						expiration: {
-							maxAgeSeconds: 60 * 60 * 24 * 365
-						}
-					}
-				}
-			]
-		})
-	],
-	resolve: {
-		extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
-		alias: {
-			components: path.resolve('./src/components/'),
-			utils: path.resolve('./src/utils/'),
-			vendors: path.resolve('./src/vendors/')
-		}
-	},
-	optimization: {
-		minimizer: [
-			new UglifyJsPlugin({
-				cache: true,
-				parallel: true,
-				sourceMap: is_dev
+					},
+					{
+						urlPattern: /^https:\/\/fonts\.gstatic\.com/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'google-fonts-webfonts',
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+							expiration: {
+								maxAgeSeconds: 60 * 60 * 24 * 365,
+							},
+						},
+					},
+				],
 			}),
-			new OptimizeCSSAssetsPlugin({})
-		],
-		splitChunks: {
-			cacheGroups: {
-				commons: {
-					chunks: 'initial',
-					minChunks: 2,
-					maxInitialRequests: 5,
-					minSize: 30000,
-					reuseExistingChunk: true
-				}
-				/* 	vendor: {
-					test    : /node_modules/,
-					chunks  : 'initial',
-					name    : 'vendor',
-					priority: 10,
-					enforce : true
-				} */
-			}
-		}
-		//runtimeChunk: true
-	},
+	].filter(Boolean),
 	performance: {
 		hints: 'warning',
-		assetFilter: assetFilename => {
-			return is_dev ? false : !/vendor/.test(assetFilename)
-		}
-	}
+		assetFilter: (assetFilename) => {
+			return isEnvDevelopment ? false : !/vendor/.test(assetFilename)
+		},
+	},
 })

packages/app/package.json

@@ -23,12 +23,14 @@ {
 	"devDependencies": {
-		"@babel/core": "^7.8.7",
-		"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+		"@babel/core": "^7.9.0",
+		"@babel/plugin-proposal-class-properties": "^7.8.3",
+		"@babel/plugin-proposal-object-rest-spread": "^7.9.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.8.7",
-		"@babel/preset-typescript": "^7.8.3",
-		"@typescript-eslint/eslint-plugin": "^2.23.0",
-		"@typescript-eslint/parser": "^2.23.0",
+		"@babel/preset-env": "^7.9.0",
+		"@babel/preset-typescript": "^7.9.0",
+		"@typescript-eslint/eslint-plugin": "^2.24.0",
+		"@typescript-eslint/parser": "^2.24.0",
 		"babel-jest": "^25.1.0",
-		"babel-loader": "^8.0.6",
+		"babel-loader": "^8.1.0",
 		"browser-sync": "^2.26.7",
+		"case-sensitive-paths-webpack-plugin": "^2.3.0",
 		"copy-webpack-plugin": "^5.1.1",
@@ -39,7 +41,7 @@ "css-loader": "^3.4.2",
 		"eslint": "^6.8.0",
-		"eslint-config-prettier": "^6.10.0",
+		"eslint-config-prettier": "^6.10.1",
 		"eslint-plugin-prettier": "^3.1.2",
-		"file-loader": "^5.1.0",
-		"html-loader": "^0.5.5",
-		"html-webpack-plugin": "^3.2.0",
+		"file-loader": "^6.0.0",
+		"html-loader": "^1.0.0",
+		"html-webpack-plugin": "^4.0.0",
 		"image-webpack-loader": "^6.0.0",
@@ -52,15 +54,18 @@ "jest": "^25.1.0",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
+		"postcss-flexbugs-fixes": "^4.2.0",
 		"postcss-loader": "^3.0.0",
+		"postcss-normalize": "^8.0.1",
 		"postcss-preset-env": "^6.7.0",
-		"prettier": "1.19.1",
+		"postcss-safe-parser": "^4.0.2",
+		"prettier": "2.0.1",
 		"sass-loader": "^8.0.2",
 		"style-loader": "^1.1.3",
+		"terser-webpack-plugin": "^2.3.5",
 		"typescript": "^3.8.3",
-		"uglifyjs-webpack-plugin": "^2.2.0",
-		"url-loader": "^3.0.0",
+		"url-loader": "^4.0.0",
 		"webpack": "^4.42.0",
 		"webpack-bundle-analyzer": "^3.6.1",
-		"workbox-webpack-plugin": "^5.0.0",
+		"workbox-webpack-plugin": "^5.1.1",
 		"worker-loader": "^2.0.0"
 	}
 }

packages/app/public/manifest.json

 {
-	"_version"   : "1.0.0",
-	"name"       : "Web App",
-	"short_name" : "PWA",
+	"_version": "1.0.0",
+	"short_name": "PWA",
+	"name": "Web App",
 	"description": "Progressive web app.",
-	"icons"      : [
+	"icons": [
 		{
-			"src"  : "favicon.png",
-			"type" : "image/png",
-			"sizes": "64x64"
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
 		},
 		{
-			"src"  : "favicon_512.png",
-			"type" : "image/png",
+			"src": "logo192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
 			"sizes": "512x512"
 		}
 	],
-	"start_url"       : ".",
-	"display"         : "standalone",
-	"background_color": "#000000",
-	"theme_color"     : "#278fef"
-}
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

packages/react-app/.babelrc.js

@@ -13,3 +13,3 @@ module.exports = {
 	],
-	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-object-rest-spread']
+	plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread']
 }

packages/react-app/config/webpack.config.js

@@ -7,3 +7,3 @@ /* eslint-disable */
 
-const app_info = require('../public/manifest.json')
+const appInfo = require('../public/manifest.json')
 
@@ -15,27 +15,92 @@ // tool
 // webpack plugins
-const CopyWebpackPlugin = require('copy-webpack-plugin'),
-	HtmlWebpackPlugin = require('html-webpack-plugin'),
-	UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
-	MiniCssExtractPlugin = require('mini-css-extract-plugin'),
-	OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
-	BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
-	WorkboxPlugin = require('workbox-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const safePostCssParser = require('postcss-safe-parser')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const WorkboxPlugin = require('workbox-webpack-plugin')
+const postcssNormalize = require('postcss-normalize')
 
-module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, is_dev = NODE_ENV === 'development' }) => ({
-	mode: NODE_ENV,
+module.exports = ({ NODE_ENV, SRC_DIR, BUILD_DIR, isEnvDevelopment = NODE_ENV === 'development', isEnvProduction = !isEnvDevelopment }) => ({
+	mode: isEnvDevelopment ? 'development' : 'production',
+	// Stop compilation early in production
+	bail: isEnvProduction,
 	target: 'web',
-	devtool: is_dev ? 'cheap-module-eval-source-map' : 'none',
+	devtool: isEnvDevelopment ? 'cheap-module-eval-source-map' : 'none',
 	watch: true,
 	watchOptions: {
-		ignored: /node_modules/
+		ignored: /node_modules/,
 	},
 	context: path.resolve(__dirname, '../'),
 	entry: {
-		app: SRC_DIR + 'app.js'
+		app: SRC_DIR + 'index.js',
 	},
 	output: {
+		// The build folder.
 		path: BUILD_DIR,
-		filename: is_dev ? '[name].js' : '[name].[chunkhash].js',
-		chunkFilename: is_dev ? '[name].js' : '[name].[chunkhash].js'
+		filename: isEnvDevelopment ? '[name].js' : '[name].[contenthash:8].js',
+		// TODO: remove this when upgrading to webpack 5
+		futureEmitAssets: true,
+		// There are also additional JS chunk files if you use code splitting.
+		chunkFilename: isEnvDevelopment ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
+		// https://webpack.js.org/configuration/output/#outputpublicpath
+		// publicPath: ''
+		// Point sourcemap entries to original disk location (format as URL on Windows)
+		devtoolModuleFilenameTemplate: isEnvProduction
+			? (info) => path.relative(SRC_DIR, info.absoluteResourcePath).replace(/\\/g, '/')
+			: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+		// this defaults to 'window', but by setting it to 'this' then
+		// module chunks which are built will work in web workers as well.
+		globalObject: 'this',
 	},
+	optimization: {
+		minimize: isEnvProduction,
+		minimizer: [
+			// This is only used in production mode
+			new TerserPlugin({
+				terserOptions: {
+					mangle: {
+						safari10: true,
+					},
+					output: {
+						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,
+					},
+				},
+			}),
+			// This is only used in production mode
+			new OptimizeCSSAssetsPlugin({
+				cssProcessorOptions: {
+					parser: safePostCssParser,
+				},
+				cssProcessorPluginOptions: {
+					preset: ['default', { minifyFontValues: { removeQuotes: false } }],
+				},
+			}),
+		],
+		// Automatically split vendor and commons
+		splitChunks: {
+			chunks: 'all',
+			name: false,
+		},
+		// Keep the runtime chunk separated to enable long term caching
+		// https://github.com/facebook/create-react-app/issues/5358
+		runtimeChunk: {
+			name: (entrypoint) => `runtime-${entrypoint.name}`,
+		},
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
+		alias: {
+			components: path.resolve('./src/components/'),
+			reducers: path.resolve('./src/reducers/'),
+			utils: path.resolve('./src/utils/'),
+			vendors: path.resolve('./src/vendors/'),
+		},
+	},
 	module: {
@@ -48,8 +113,8 @@ rules: [
 					{
-						loader: 'worker-loader'
-					}
-				]
+						loader: 'worker-loader',
+					},
+				],
 			},
 			{
-				test: /\.[tj]sx?$/i,
+				test: /\.([tj]sx?|mjs)$/i,
 				exclude: /node_modules/,
@@ -60,6 +125,10 @@ use: [
 						options: {
-							cacheDirectory: true
-						}
-					}
-				]
+							// This is a feature of `babel-loader` for webpack (not Babel itself).
+							// It enables caching results in ./node_modules/.cache/babel-loader/
+							// directory for faster rebuilds.
+							cacheDirectory: true,
+							compact: isEnvProduction,
+						},
+					},
+				],
 			},
@@ -70,9 +139,9 @@ {
 				use: [
-					is_dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+					isEnvDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
 					{
 						loader: 'css-loader',
 						options: {
-							sourceMap: is_dev,
-							importLoaders: 2
-						}
+							sourceMap: isEnvDevelopment,
+							importLoaders: 2,
+						},
 					},
@@ -82,9 +151,25 @@ {
 						options: {
-							sourceMap: is_dev,
+							sourceMap: isEnvDevelopment,
+							// Necessary for external CSS imports to work
+							// https://github.com/facebook/create-react-app/issues/2677
 							ident: 'postcss',
-							plugins: () => [require('postcss-preset-env')]
-						}
+							plugins: () => [
+								require('postcss-flexbugs-fixes'),
+								require('postcss-preset-env')({
+									autoprefixer: {
+										flexbox: 'no-2009',
+									},
+									stage: 3,
+								}),
+								// Adds PostCSS Normalize as the reset css with default options,
+								// so that it honors browserslist config in package.json
+								// which in turn let's users customize the target behavior as per their needs.
+								postcssNormalize(),
+							],
+						},
 					},
-					'sass-loader'
-				]
+					'sass-loader',
+				],
+				// See https://github.com/webpack/webpack/issues/6571
+				sideEffects: true,
 			},
@@ -98,9 +183,9 @@ {
 						options: {
-							attrs: ['img:src', 'img:data-src']
-						}
-					}
-				]
+							attributes: ['img:src', 'img:data-src'],
+						},
+					},
+				],
 			},
 			{
-				test: /\.(gif|png|jpe?g|svg)$/i,
+				test: /\.(bmp|gif|png|jpe?g|svg)$/i,
 				exclude: /node_modules/,
@@ -111,4 +196,4 @@ use: [
 						options: {
-							limit: 8192
-						}
+							limit: 8192,
+						},
 					},
@@ -118,25 +203,25 @@ {
 						options: {
-							disable: is_dev,
+							disable: isEnvDevelopment,
 							mozjpeg: {
 								progressive: true,
-								quality: 65
+								quality: 65,
 							},
 							optipng: {
-								enabled: false
+								enabled: false,
 							},
 							pngquant: {
 								quality: [0.65, 0.9],
-								speed: 4
+								speed: 4,
 							},
 							gifsicle: {
-								interlaced: false
+								interlaced: false,
 							},
 							webp: {
-								quality: 75
-							}
-						}
-					}
-				]
-			}
-		]
+								quality: 75,
+							},
+						},
+					},
+				],
+			},
+		],
 	},
@@ -146,3 +231,3 @@ plugins: [
 			context: '.',
-			manifest: path.join(BUILD_DIR, './vendor-manifest.json')
+			manifest: path.join(BUILD_DIR, './vendor-manifest.json'),
 		}),
@@ -154,3 +239,3 @@ new CopyWebpackPlugin([
 				flatten: true,
-				cache: true
+				cache: true,
 			},
@@ -160,96 +245,66 @@ {
 				to: './vendors',
-				cache: true
-			}
+				cache: true,
+			},
 		]),
 		new HtmlWebpackPlugin({
-			chunks: ['app', 'commons'],
+			chunks: ['app'],
 			filename: 'index.html',
 			template: './public/index.ejs',
 			templateParameters: {
-				title: app_info.name,
-				description: app_info.description,
+				title: appInfo.name,
+				description: appInfo.description,
 				favicon: 'favicon.ico',
 				manifest: 'manifest.json',
-				vendor: 'vendor.js'
-			}
+				vendor: 'vendor.js',
+			},
 		}),
-		new MiniCssExtractPlugin({
-			filename: is_dev ? '[name].css' : '[name].[hash].css',
-			chunkFilename: is_dev ? '[id].css' : '[id].[hash].css'
-		}),
+		// This is necessary to emit hot updates (currently CSS only):
+		isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+		// File systems of different operating systems handle case differently, forcing case sensitivity
+		isEnvDevelopment && new CaseSensitivePathsPlugin(),
+		isEnvProduction &&
+			new MiniCssExtractPlugin({
+				filename: '[name].[contenthash:8].css',
+				chunkFilename: '[name].[contenthash:8].chunk.css',
+			}),
 		new BundleAnalyzerPlugin(),
-		new WorkboxPlugin.GenerateSW({
-			maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
-			additionalManifestEntries: [
-				{ url: 'vendor-manifest.json', revision: app_info._version },
-				{ url: 'vendor.js', revision: app_info._version }
-			],
-			runtimeCaching: [
-				{
-					urlPattern: /^https:\/\/fonts\.googleapis\.com/,
-					handler: 'StaleWhileRevalidate',
-					options: {
-						cacheName: 'google-fonts-stylesheets'
-					}
-				},
-				{
-					urlPattern: /^https:\/\/fonts\.gstatic\.com/,
-					handler: 'CacheFirst',
-					options: {
-						cacheName: 'google-fonts-webfonts',
-						cacheableResponse: {
-							statuses: [0, 200]
+		isEnvProduction &&
+			new WorkboxPlugin.GenerateSW({
+				clientsClaim: true,
+				exclude: [/\.map$/, /asset-manifest\.json$/],
+				maximumFileSizeToCacheInBytes: 8 * 1024 * 1024,
+				additionalManifestEntries: [
+					{ url: 'vendor-manifest.json', revision: appInfo._version },
+					{ url: 'vendor.js', revision: appInfo._version },
+				],
+				runtimeCaching: [
+					{
+						urlPattern: /^https:\/\/fonts\.googleapis\.com/,
+						handler: 'StaleWhileRevalidate',
+						options: {
+							cacheName: 'google-fonts-stylesheets',
 						},
-						expiration: {
-							maxAgeSeconds: 60 * 60 * 24 * 365
-						}
-					}
-				}
-			]
-		})
-	],
-	resolve: {
-		extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
-		alias: {
-			components: path.resolve('./src/components/'),
-			reducers: path.resolve('./src/reducers/'),
-			utils: path.resolve('./src/utils/'),
-			vendors: path.resolve('./src/vendors/')
-		}
-	},
-	optimization: {
-		minimizer: [
-			new UglifyJsPlugin({
-				cache: true,
-				parallel: true,
-				sourceMap: is_dev
+					},
+					{
+						urlPattern: /^https:\/\/fonts\.gstatic\.com/,
+						handler: 'CacheFirst',
+						options: {
+							cacheName: 'google-fonts-webfonts',
+							cacheableResponse: {
+								statuses: [0, 200],
+							},
+							expiration: {
+								maxAgeSeconds: 60 * 60 * 24 * 365,
+							},
+						},
+					},
+				],
 			}),
-			new OptimizeCSSAssetsPlugin({})
-		],
-		splitChunks: {
-			cacheGroups: {
-				commons: {
-					chunks: 'initial',
-					minChunks: 2,
-					maxInitialRequests: 5,
-					minSize: 30000,
-					reuseExistingChunk: true
-				}
-				/* 	vendor: {
-					test    : /node_modules/,
-					chunks  : 'initial',
-					name    : 'vendor',
-					priority: 10,
-					enforce : true
-				} */
-			}
-		}
-		//runtimeChunk: true
-	},
+	].filter(Boolean),
 	performance: {
 		hints: 'warning',
-		assetFilter: assetFilename => {
-			return is_dev ? false : !/vendor/.test(assetFilename)
-		}
-	}
+		assetFilter: (assetFilename) => {
+			return isEnvDevelopment ? false : !/vendor/.test(assetFilename)
+		},
+	},
 })

packages/react-app/package.json

@@ -22,5 +22,5 @@ {
 		"axios": "^0.19.2",
-		"react": "^16.13.0",
-		"react-dom": "^16.13.0",
-		"react-jss": "^10.0.4",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"react-jss": "^10.1.1",
 		"react-redux": "^7.2.0",
@@ -33,17 +33,19 @@ "react-router-dom": "^5.1.2",
 	"devDependencies": {
-		"@babel/core": "^7.8.7",
-		"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+		"@babel/core": "^7.9.0",
+		"@babel/plugin-proposal-class-properties": "^7.8.3",
+		"@babel/plugin-proposal-object-rest-spread": "^7.9.0",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.8.7",
-		"@babel/preset-react": "^7.8.3",
-		"@babel/preset-typescript": "^7.8.3",
+		"@babel/preset-env": "^7.9.0",
+		"@babel/preset-react": "^7.9.1",
+		"@babel/preset-typescript": "^7.9.0",
 		"@types/loadable__component": "^5.10.0",
-		"@types/react": "^16.9.23",
+		"@types/react": "^16.9.25",
 		"@types/react-redux": "^7.1.7",
 		"@types/react-router-dom": "^5.1.3",
-		"@typescript-eslint/eslint-plugin": "^2.23.0",
-		"@typescript-eslint/parser": "^2.23.0",
+		"@typescript-eslint/eslint-plugin": "^2.24.0",
+		"@typescript-eslint/parser": "^2.24.0",
 		"babel-jest": "^25.1.0",
-		"babel-loader": "^8.0.6",
+		"babel-loader": "^8.1.0",
 		"browser-sync": "^2.26.7",
+		"case-sensitive-paths-webpack-plugin": "^2.3.0",
 		"copy-webpack-plugin": "^5.1.1",
@@ -54,9 +56,9 @@ "css-loader": "^3.4.2",
 		"eslint": "^6.8.0",
-		"eslint-config-prettier": "^6.10.0",
+		"eslint-config-prettier": "^6.10.1",
 		"eslint-plugin-prettier": "^3.1.2",
 		"eslint-plugin-react": "^7.19.0",
-		"eslint-plugin-react-hooks": "^2.5.0",
-		"file-loader": "^5.1.0",
-		"html-loader": "^0.5.5",
-		"html-webpack-plugin": "^3.2.0",
+		"eslint-plugin-react-hooks": "^2.5.1",
+		"file-loader": "^6.0.0",
+		"html-loader": "^1.0.0",
+		"html-webpack-plugin": "^4.0.0",
 		"image-webpack-loader": "^6.0.0",
@@ -69,16 +71,19 @@ "jest": "^25.1.0",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
+		"postcss-flexbugs-fixes": "^4.2.0",
 		"postcss-loader": "^3.0.0",
+		"postcss-normalize": "^8.0.1",
 		"postcss-preset-env": "^6.7.0",
-		"prettier": "1.19.1",
+		"postcss-safe-parser": "^4.0.2",
+		"prettier": "2.0.1",
 		"redux-logger": "^3.0.6",
 		"sass-loader": "^8.0.2",
 		"style-loader": "^1.1.3",
+		"terser-webpack-plugin": "^2.3.5",
 		"typescript": "^3.8.3",
-		"uglifyjs-webpack-plugin": "^2.2.0",
-		"url-loader": "^3.0.0",
+		"url-loader": "^4.0.0",
 		"webpack": "^4.42.0",
 		"webpack-bundle-analyzer": "^3.6.1",
-		"workbox-webpack-plugin": "^5.0.0",
+		"workbox-webpack-plugin": "^5.1.1",
 		"worker-loader": "^2.0.0"
 	}
 }

packages/react-app/public/manifest.json

 {
-	"_version"   : "1.0.0",
-	"name"       : "App dev with React",
-	"short_name" : "React App",
+	"_version": "1.0.0",
+	"short_name": "React App",
+	"name": "App dev with React",
 	"description": "Project development launch configuration using webpack. Suitable for applications that rely on react.js && redux && react-router development.",
-	"icons"      : [
+	"icons": [
 		{
-			"src"  : "favicon.png",
-			"type" : "image/png",
-			"sizes": "64x64"
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
 		},
 		{
-			"src"  : "favicon_512.png",
-			"type" : "image/png",
+			"src": "logo192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
 			"sizes": "512x512"
 		}
 	],
-	"start_url"       : ".",
-	"display"         : "standalone",
-	"background_color": "#000000",
-	"theme_color"     : "#278fef"
-}
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

README.md

@@ -5,4 +5,4 @@ # Create Web App
 
-[0]: https://flow.org/ 'Flow: A Static Type Checker for JavaScript'
-[1]: http://www.typescriptlang.org/ 'TypeScript is a typed superset of JavaScript that compiles to plain JavaScript'
+[0]: https://flow.org/ "Flow: A Static Type Checker for JavaScript"
+[1]: http://www.typescriptlang.org/ "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript"
 
@@ -16,3 +16,3 @@ :coffee: Create PWA（Progressive Web App） project development environment startup configuration.
 -   create-web-app
--   create-react-app
+-   create-react-app（or [Official](https://create-react-app.dev/)）
 
@@ -19,0 +19,0 @@ `create-web-app` builds a PWA that doesn't depend on any development framework, while `create-react-app` builds PWA based on React framework ecosystems such as React.js, Redux.js, and React Router.

No alert changes

Improved metrics

Lines of code

2091

increased by6.14%

Worsened metrics

Total package byte prevSize

165100

decreased by-73.8%

No dependency changes