Webpack Setup for React:

Live-reload:

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

Hot-reload:

// webpack config file exportmodule.exports={mode: "development",devServer: {liveReload: false,hot: true,},plugins: [newwebpack.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 thisstage: 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:

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

MiniCssExtractPlugin:

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