(WEBPACK) Can't get it to work with webpack and htmlwebpackplugin

[Rami-Al]

trafficstars

Hey guys, I'm trying to use purgecss with my Webpack by using postcss but nothing's happening. I'm sure though that postcss is working fine since I tried other plugins like nanocss and autoprefixer and they're working perfectly. You can have a look at the simple zip project if you'd like. Don't forget to: $ npm i . postcss.zip OR have a look at my config files here.

webpack.config.js

const glob = require("glob");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");

const PATHS = {
    src: path.join(__dirname, 'src')
}

module.exports = {
    entry: path.join(__dirname, "src", "main.js"),
    output: {
        filename: "main_bundle.js",
        path: path.join(__dirname, "dist")
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\.(svg|jpeg|jpg|gif)$/,
                exclude: /node_modules/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "assets"
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|png|ico)$/,
                loader: 'url-loader?limit=100000'
            },
            {

                test: /\.(sc|c)ss$/,
                exclude: /node_modules/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                }, "css-loader", "postcss-loader", "sass-loader", ]
            },
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        }),
        new HtmlWebPackPlugin({
            template: "./src/html-template.html",
            filename: "./index.html"
        })

    ]
}

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer'),
        require("@fullhuman/postcss-purgecss")({
            content: ["./src/*.html", "./src/main.js", "./src/main.scss"],
            defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+(::)/g) || []
        })
        // require('cssnano')({
        //     preset: 'default',
        // })
    ]
}

package.json

{
  "name": "tanmiya",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.1.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^4.1.0",
    "glob": "^7.1.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-gifsicle": "^6.0.1",
    "imagemin-jpegtran": "^6.0.0",
    "imagemin-optipng": "^7.0.0",
    "imagemin-svgo": "^7.0.0",
    "imagemin-webpack": "^5.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "purgecss-webpack-plugin": "^1.5.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "compass-mixins": "^0.12.10",
    "cssnano": "^4.1.10",
    "imagemin-mozjpeg": "^8.0.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "postcss-loader": "^3.0.0",
    "tailwindcss": "^1.1.1"
  }
}

[plxty]

I guess it's the problem of sass-loader, not HtmlWebPackPlugin. After adding a postcss-import plugin and everything works fine. Maybe the process order of loaders are different (I'm not sure) :/

[mwmcode]

Take a look at css-loader's importLoaders option From docs:

use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            },
          },
          'postcss-loader',
          'sass-loader',
        ],