webpack config

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "browserslist": [
    "last 5 version"
  ],
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "autoprefixer": "^9.8.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
    "cssnano": "^4.1.10",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.1",
    "html-webpack-plugin": "^4.4.1",
    "mini-css-extract-plugin": "^0.11.2",
    "node-sass": "^4.14.1",
    "path": "^0.12.7",
    "postcss-loader": "^4.0.1",
    "sass-loader": "^10.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

postcss.config.js

const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    autoprefixer,
    cssnano({
      preset: [
        'default', {
          discardComments: {
            removeAll: true
          }
        }
      ]
    })
  ]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const Paths = {
  Folders: {
    SRC: path.join(__dirname, './src'),
    DIST: path.join(__dirname, './dist')
  },
  ENTRY: './src/index.js'
};

const mode = process.env.NODE_ENV;
const isDev = mode === 'development';

const addPlugins = () => {
  const plugins = [
    new HtmlWebpackPlugin({ template: `${Paths.Folders.SRC}/index.html` }),
    new MiniCssExtractPlugin({ filename: `css/${isDev ? `[name].css` : `[name].[contenthash].css`}` }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${Paths.Folders.SRC}/static`,
          to: Paths.Folders.DIST
        }
      ]
    })
  ];

  if (!isDev) {
    plugins.push(new CleanWebpackPlugin());
  }

  return plugins;
};

const addCssLoaders = preprocessor => {
  const cssLoaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: isDev,
        reloadAll: true,
        publicPath: '../'
      }
    },
    'css-loader'
  ];

  if (!isDev) {
    cssLoaders.push('postcss-loader');
  }

  if (preprocessor) {
    cssLoaders.push(preprocessor);
  }

  return cssLoaders;
};

module.exports = {
  mode: mode,
  entry: {
    main: Paths.ENTRY
  },
  output: {
    path: Paths.Folders.DIST,
    filename: `js/${isDev ? `[name].js` : `[name].[contenthash].js`}`
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  devtool: isDev ? 'source-map' : '',
  devServer: {
    port: 4200,
    overlay: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: addCssLoaders('sass-loader')
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        loader: 'file-loader',
        options: {
          name: `${isDev ? `[name].[ext]` : `[name].[contenthash].[ext]`}`,
          outputPath: 'images'
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  plugins: addPlugins()
};