awebpackfile.js

const path = require("path");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob-all");
const webpack = require("webpack");

//let toProvide = {}

// the path(s) that should be cleaned
let pathsToClean = [
  "./static/dist/js/*.js",
  "./static/dist/css/*.css",
  "./static/dist/Fonts/*.*"
];
// the clean options to use
let cleanOptions = {
  root: __dirname,
  verbose: true,
  dry: false,
  allowExternal: true
};
/**
 * Custom PurgeCSS Extractor
 * https://github.com/FullHuman/purgecss
 * https://github.com/FullHuman/purgecss-webpack-plugin
 */
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g);
  }
}
module.exports = function(environment) {
  var CONFIG = {
    entry: {
      app: "./src/js/main.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["env"]
              // plugins: [require('babel-plugin-transform-object-rest-spread')]
            }
          }
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
              {
                loader: "css-loader",
                options: {
                  importLoaders: 1,
                  minimize: true || {
                    discardComments: {
                      removeAll: true
                    },
                    minifyFontValues: false,
                    autoprefixer: false
                  }
                }
              },
              "postcss-loader"
            ]
          })
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
          use: [
            {
              loader: "file-loader",
              options: {
                //name: ".Fonts/[name].[ext]",
                //name: '/Fonts/[name].[ext]',
                //prefix: '/dist',
                //context: '/dist/',
                publicPath: "/dist",
                //useRelativePath: true,
                outputPath: "/Fonts/"
              }
            }
          ]
        },
        {
          //Mustache loader for Algolia templates
          test: /\.html$/,
          loader: "mustache-loader"
          // loader: 'mustache-loader?minify'
          // loader: 'mustache-loader?{ minify: { removeComments: false } }'
          // loader: 'mustache-loader?noShortcut'
        }
      ]
    },
    output: {
      path: path.join(__dirname, "./static/dist/")
    },

    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"]
    },

    plugins: [new CleanWebpackPlugin(pathsToClean, cleanOptions)]
  };

  switch (environment) {
    case "development":
      CONFIG.output.filename = "js/[name].js";
      CONFIG.plugins.push(
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(false)
        }),
        new ExtractTextPlugin({
          filename: getPath => {
            return getPath("css/[name].css");
          },
          allChunks: true
        })
      );
      watch: true;
      break;
    case "production":
      // In production, hash our JS
      CONFIG.output.filename = "js/[name].[chunkhash].js";
      CONFIG.plugins.push(
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify(true)
        }),

        // In production, hash our CSS
        new ExtractTextPlugin({
          filename: getPath => {
            return getPath("css/[name].[contenthash].css");
          },
          allChunks: true
        }),
        // In production, Run our CSS through PurgeCSS
        new PurgecssPlugin({
          whitelist: ["body", ".whitelisted-class"],
          paths: glob.sync([
            path.join(__dirname, "src/layouts/*.html"),
            path.join(__dirname, "src/js/algolia/templates/*.html")
          ]),
          // TailwindExtractor runs through our layouts to get the CSS for PurgeCSS
          extractors: [
            {
              extractor: TailwindExtractor,
              extensions: ["html"]
            }
          ]
        }),
        new UglifyJSPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin()
      );
      break;
    default:
      CONFIG.output.filename = "js/[name].[chunkhash].js";
  }
  return CONFIG;
};

post-css.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require("tailwindcss")("./src/css/tailwind-config.js"),
    require('autoprefixer')
  ]
};