PR-753737: Adding final client webpack configuration.

.env.example

@@ -0,0 +1,3 @@
+#Port of React App
+PORT_DEV= #Default Port 3000
+PORT_RELOAD_DEV= #Default Port PORT_DEV

.gitignore

@@ -1,2 +1,6 @@
 #node_modules ignore
-node_modules
+node_modules
+#.envs
+.env
+#build
+/build

package.json

@@ -4,9 +4,9 @@
   "description": "Starter Kit de server side render de react",
   "main": "index.js",
   "scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve --config webpack.config.dev.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack --mode production"
+    "build": "webpack --config webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
+    "dotenv": "^16.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -31,8 +32,16 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.4",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.8.1"

src/config/index.js

@@ -0,0 +1,8 @@
+require('dotenv').config();
+
+const config = {
+    portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
+    portReloadDev: process.env.PORT_RELOAD_DEV,
+}
+
+module.exports = { config: config };

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 import App from './components/App';
+import './styles/global.sass';
 
 ReactDom.render(<App />, document.getElementById('app'));

src/styles/global.sass

@@ -0,0 +1,6 @@
+$base-color: #c6538c
+$color: rgba(black, 0.88)
+
+body
+    background-color: $base-color
+    color: $color

webpack.config.dev.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { config: { portDev, portReloadDev } } = require('./src/config')
+
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'build'),
+        filename: 'bundle.js',
+    },
+    resolve: {
+        extensions: ['.js', '.jsx'],
+    },
+    mode: 'development',
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                },
+            },
+            {
+                test: /\.html$/,
+                use: [
+                    { loader: 'html-loader' }
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                ] 
+            },
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './public/index.html',
+            filename: './index.html',
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+        }),
+    ],
+    devServer: {
+        static: {
+            directory: path.join(__dirname, 'dist')
+        },
+        allowedHosts: "all",
+        compress: true,
+        port: portDev,
+        hot: true,
+        client: {
+            reconnect: true,
+            webSocketURL: {
+                port: portReloadDev ? portReloadDev : portDev,
+            }
+        },
+    },
+}

webpack.config.js

@@ -1,15 +1,25 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
     entry: './src/index.js',
     output: {
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'build'),
-        filename: 'bundle.js'
+        filename: 'bundle.js',
+        publicPath: '/',
     },
     resolve: {
-        extensions: ['.js', '.jsx']
+        extensions: ['.js', '.jsx'],
+        alias: {
+            '@components': path.resolve(__dirname, 'src/components/'),
+            '@styles': path.resolve(__dirname, 'src/styles/'),
+        }
     },
+    mode: 'production',
     module: {
         rules: [
             {
@@ -17,28 +27,39 @@ module.exports = {
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader',
-                }
+                },
             },
             {
                 test: /\.html$/,
                 use: [
                     { loader: 'html-loader' }
                 ]
-            }
+            },
-        ]
+            {
+                test: /\.s[ac]ss$/,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                ], 
+            },
+        ],
     },
     plugins: [
         new HtmlWebpackPlugin({
             template: './public/index.html',
             filename: './index.html'
-        })
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
+        new CleanWebpackPlugin(),
     ],
-    devServer: {
+    optimization: {
-        static: {
+        minimize: true,
-            directory: path.join(__dirname, 'dist')
+        minimizer: [
-        },
+            new CssMinimizerPlugin(),
-        allowedHosts: "all",
+            new TerserPlugin(),
-        compress: true,
+        ],
-        port: 3000
+    },
-    }
+}
-}