Webpack Setup for React:

Live-reload:

// webpack config file export
module.exports = {
    mode: "development",
    devServer: {
        liveReload: true,
    },
};

Hot-reload:

// webpack config file export
module.exports = {
    mode: "development",
    devServer: {
        liveReload: false,
        hot: true,
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
};

Loaders:

• js:
  • babel
    • @babel/core
    • @babel/preset-env
    • @babel/preset-react
• css:
  • Style Loader / MiniCSSExtractPlugin
  • CSS Loader
  • PostCSS Loader
    • cssnano
    • postcss-import
    • postcss-preset-env
• sass:
  • SASS Loader with SASS
• images:
  • File Loader and URL Loader

Snapshots:

babel-loader:

{
    test: /\.js$/i,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
        },
    }
}

css-loader:

{
    test: /\.css$/i,
    use: [
        "style-loader", // for production { loader: MiniCssExtractPlugin.loader }
        {
            loader: "css-loader",
            options: { sourceMap: true }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: {
                        "postcss-import": {},
                        "postcss-preset-env": {
                            browsers: ["last 1 version"], // for production change this
                            stage: 0
                        }
                    }
                },
                sourceMap: true
            }
        }
    ]
}

sass-loader:

{
    test: /\.s[ac]ss$/i,
    use: [
        "style-loader", // for production { loader: MiniCssExtractPlugin.loader }
        {
            loader: "css-loader",
            options: { sourceMap: true }
        },
        {
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: {
                        "postcss-import": {},
                        "postcss-preset-env": {
                            browsers: ["last 1 version"],
                            stage: 0
                        }
                    }
                },
                sourceMap: true
            }
        },
        {
            loader: "sass-loader",
            options: {
                sourceMap: true,
                implementation: require("sass")
            }
        }
    ]
}

file-loader:

{
    test: /\.(png|jpe?g|gif)$/i,
    use: {
        loader: "file-loader",
        options: {
            publicPath: path.resolve(__dirname, "../dist/static/"),
            outputPath: "images"
        }
    }
}

url-loader:

{
    test: /\.svg$/i,
    use: { loader: "url-loader" }
}

Plugins:

• HtmlWebpackPlugin
• MiniCssExtractPlugin
• CleanWebpackPlugin

HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../public/index.html"),
    favicon: path.resolve(__dirname, "../public/favicon.ico"),
});

MiniCssExtractPlugin:

new MiniCssExtractPlugin({
    filename: path.join("static", "css", "[name].[contenthash].css"),
});