Basic webpack configuration file for Sass and ES6+ projects.

package.json

{
  "name": "webpack-config-file",
  "version": "1.0.0",
  "description": "Basic webpack configuration file for Sass and ES6+ projects.",
  "main": "index.js",
  "author": "jarod",
  "license": "MIT",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open",
    "prod": "cross-env NODE_ENV=production webpack"
  },
  "browserList": [
    "defaults",
    "last 2 versions",
    "not ie < 11",
    "not dead",
    ">0.5%"
  ],
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

postcss.config.js

module.exports = {
  plugins: [require("autoprefixer")],
};

webpack.config.js

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

module.exports = {
  entry: ["./src/index.js", "./src/style.scss"],
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/i,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: "style-bundle.css" }),
    new HtmlWebpackPlugin(),
  ],
  mode: process.env.NODE_ENV,
};