Webpack config to compile Sass, ES6 and Vue Components. Implements PurgeCss to remove unused css classes

package.json

{
  "name": "tbs4",
  "version": "1.0.0",
  "description": "A Twitter Bootstrap 4 starter theme",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "build": "webpack",
    "watch": "webpack --watch",
    "production": "cross-env NODE_ENV=production webpack"
  },
  "author": "Neil Camm",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.1.1",
    "bootstrap": "^4.1.2",
    "jquery": "^3.3.1",
    "npm": "^6.2.0",
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "glob-all": "^3.1.0",
    "node-sass": "^4.9.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "postcss-loader": "^2.1.6",
    "purgecss-webpack-plugin": "^1.2.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.1",
    "webpack-build-notifier": "^0.1.28",
    "webpack-cli": "^3.1.0"
  }
}

webpack.config.js

const path                        = require('path');
const webpack                     = require('webpack');
const ExtractTextPlugin           = require("extract-text-webpack-plugin");
const UglifyJSPlugin              = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin     = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin             = require('vue-loader/lib/plugin');
const compiler                    = require('vue-template-compiler');
const glob                        = require('glob-all');
const PurgecssPlugin              = require('purgecss-webpack-plugin');
const WebpackBuildNotifierPlugin  = require('webpack-build-notifier');

class Extractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g);
  }
}

const notificationOptions = {
  title: "Webpack",
  logo: path.resolve("./public/wp-content/themes/cf/assets/images/webpack_logo.png"),
  suppressSuccess: true,
  successSound: 'Submarine',
  failureSound: 'Basso',
  successIcon: path.resolve("./public/wp-content/themes/cf/assets/images/success.png"),
  failureIcon: path.resolve("./public/wp-content/themes/cf/assets/images/failure.png"),
};

const config = {
  mode: 'development',
  entry: {
    app: ['./public/wp-content/themes/cf/assets/js/source/bootstrap.js', './public/wp-content/themes/cf/assets/scss/app.scss'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './public/wp-content/themes/cf/assets/js/'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        }),
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../css/[name].css'),
    new WebpackBuildNotifierPlugin(notificationOptions),
    new VueLoaderPlugin,
    //new PurgecssPlugin({
    //    paths: glob.sync([
    //      path.join(__dirname, "./public/wp-content/themes/cf/**/*.php"),
    //      path.join(__dirname, path.resolve(__dirname, './public/wp-content/themes/cf/assets/js/app.js')),//

//        ]),
//        extractors: [
//          {
//            extractor: Extractor,
//            extensions: ["html", "js", "php", "vue"]
//          }
//        ]
//      })
  ]
};

// minify cff and js when running npm run production
if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new UglifyJSPlugin(),
    new OptimizeCssAssetsPlugin(),
    new WebpackBuildNotifierPlugin(notificationOptions)
  );
}

module.exports = config;