StarWarsAPI : 2021.05.06 React_Webpack Build & Deployment

Folder Structure

src
    - App.js
    - index.js
    - indes.html
    
webpack.config.json

webpack.config.json

const path = require('path')
const webpack = require('webpack')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MinCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')  


module.exports = {
    name : 'wordrelay-setting',
    mode : 'production' , 
    devtool : 'eval',
    resolve : {
        extensions : ['.js', '.jsx'], // files ending with .js, .jsx are the files that babel will compile 
        modules: [
            path.join(__dirname, "src"),
            "node_modules" 
          ]
    },
    entry : { // location where react starts
        app : ['./src/index']
    }, 
    module : {
        rules : [{
            test : /\.jsx?$/,
            loader : 'babel-loader',
            exclude : /node_modules/, // exclude node_modules when compiling through babel 
            options : {
                // preset : automatically support old browsers 
                presets : [
                    [ '@babel/preset-env', {
                        targets : {
                            // only target wanted browsers  
                            // ' 5% > in KR '
                            browsers : ['last 2 chrome versions']
                        },
                    }],
                    '@babel/preset-react'
                ],
                plugins : [
                    '@babel/plugin-proposal-class-properties',
                    // below plugin : for hot-loader
                    'react-refresh/babel',
                    [
                        "module-resolver",
                        {
                          "alias": {
                            "~/*": "./src"
                          }
                        }
                      ]
                    ]
            }
        },
        {
            test : /\.css$/,
            use : [
                MinCssExtractPlugin.loader , // minimize the css files and codes  --> if you use this loader, you don't have to use 'style-loader' 
           
                'css-loader', // Turns css into js( read css files)
                'resolve-url-loader' // external css ex) semantic-ui-css
            ] 
        },
        {
            test: /\.scss$/,
            use: [
                MinCssExtractPlugin.loader , /
                // 'style-loader',
                'css-loader',
                'sass-loader' 
            ]
        },
        { // semantic-ui-css 
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
            },
        }
    ]
    },
    plugins : [ // additional works
        new webpack.HotModuleReplacementPlugin(),
        new ReactRefreshWebpackPlugin() ,
        new TerserPlugin(),
        new BundleAnalyzerPlugin(),
        new MinCssExtractPlugin({
            filename : 'styles.css',
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'   
        })
    ] ,  
    output : { // compiled file as a result of bundeled process  
        // __dirname : current directory 
        // will put all the compiled bundled file into 'dist' file 
        path : path.join(__dirname , '/dist'), 
        filename : 'index_bundle.js',
        // publicPath : base path for '/dist/index.html' referencing 'bundeld.js or bundeled.css' files 
        // ex) '/base' => <script defer="defer" src="/base/index_bundle.js"></script>
        publicPath : '',
        clean : {
            keep: /\.git/
        }
    }, ,
    devServer: {
        historyApiFallback: true, // support page-refresh for react-router-dom
        publicPath : '/dist/',
        hot : true
    }
}

package.json

"scripts": {
    "build": "webpack",
    "deploy": "gh-pages -d dist"
},
"homepage": "https://ohbumjun.github.io/React_StarWarsApi",

script

npm run build 

result

( newly created )
dist
   - index_bundle.js
   - index.html
   - style.css
   

Deployment

Failure 1

npm run deploy

Link

https://ohbumjun.github.io/React_StarWarsApi/

Error

Uncaught ReferenceError: $RefreshSig$ is not defined