Webpack basic SASS setup

webpack.config.js

// set compiled css filename
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// clean dist folder before each build
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// remove unwanted index.js generated by webpack
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')

const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'

const toCompile = {
  import: "./scss/styles.scss",
};

const destFolder = '/dist';

module.exports = {
  context: __dirname,
  mode: mode,
  entry: toCompile,
  output: {
    path: __dirname + destFolder
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
              sourceMap: true,
            },
          }
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({filename: "[name].min.css"}),
    new CleanWebpackPlugin(),
    new FixStyleOnlyEntriesPlugin(),
  ]
};