Create minified file of CSS using Webpack in React

Question

Its my first time configuring a webpack in a React project. I have configured the Sass and the glob loader to dynamically import all the SCSS files from my components folder. The problem is all the styles are getting appended in the global Style tag in head. How can i create a minified CSS file of my project. I tried using MiniCSSExtract plugin, but i dont know whether its used to create a minified file of the project styles. I have posted my webpack.config.js file below.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/public/index.html',
  filename: 'index.html',
  inject: 'body'
});


module.exports = {
   entry: ['./src/main.js', './src/main.scss'],
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js',
      publicPath: '/'
   },
   devServer: {
      inline: false,
      contentBase: "./dist",
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
          test: /\.js$/,
          use: 'webpack-import-glob-loader'
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader', 'webpack-import-glob-loader']
        },
        { 
          test: /\.json$/, 
          loader: 'json' 
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader'],
        }
      ]
   },
   devServer: {
    historyApiFallback: true
  },
   plugins:[
    new MiniCssExtractPlugin(),
    HtmlWebpackPluginConfig
   ]
}

Here is my index.html where i have added the bundle.js which gets created by webpack.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id="app"></div>
      <script src='bundle.js'></script>
   </body>
</html>

@ASDFGerte Thank you for pointing towards the right direction. — tkamath99

tkamath99 tkamath99 · Accepted Answer · 2021-05-17T12:55:49

So upon careful inspection and reading docs of Webpack plugin, i was able to resolve the issue, I also came to know about the cache buster which webpack provides. If anyone looking for configuration in near future, might be useful for them.

const currentTask = process.env.npm_lifecycle_event;
const path = require('path')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')

const config = {
  entry: './app/app.js',
  output: {
    filename: 'myBundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [new HTMLWebpackPlugin({ template: './app/index.html', inject: 'body' })],
  mode: "development",
  devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

if(currentTask == "build") {
  config.mode == "production";
  config.module.rules[0].use[0] = MiniCSSExtractPlugin.loader
  config.plugins.push(new MiniCSSExtractPlugin({filename: 'main.[hash].css'}), new CleanWebpackPlugin(), new WebpackManifestPlugin())
}

module.exports = config;

Create minified file of CSS using Webpack in React

1 Answers