Same classes by different html

[DracotMolver]

trafficstars

I realized that all my separeted files have the same sizes and using the Chrome Coverage option, I saw that I had some classes that I don't use in one HTML file but I'm doing in another file. To understand better:

webpack.config.js

const path = require('path')
const glob = require('glob-all')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const PurifyCSSPlugin = require('purifycss-webpack')

const extractSass = new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true,
    disable: process.env.NODE_ENV === "development"
});

const paths = {
    context: path.resolve(__dirname, './src'),
    dist: path.resolve(__dirname, './dist')
}

module.exports = {
    cache: false,
    context: paths.context,
    module: {
        rules: [
            { // -======= CSS =======-
                test: /\.css$/,
                use: extractSass.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                url: false
                            }
                        }
                    ]
                })
            },
            { // -======= SASS =======-
                test: /\.sass$/,
                use: extractSass.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                url: false
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                url: false
                            }
                        }
                    ]
                })
            },
            { // -======= HTML =======-
                test: /\.html$/,
                use: ['file-loader?name=[name].[ext]',
                    {
                        loader: 'html-minify-loader',
                        options: {
                            loose: true
                        }
                    }
                ]
            }
        ]
    },
    entry: {
        home: './js/home.js',
        mantencion: './js/mantencion.js',
    },
    output: {
        path: paths.dist,
        filename: '[name].bundle.js',
        publicPath: paths.dist,
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        }),
        extractSass,
        new PurifyCSSPlugin({
            minimize: true,
            paths: glob.sync([
                path.join(__dirname, '/src/views/*.html')
            ]),
            purifyOptions: {
                whitelist: ['*anim*']
            }
        })
    ]
}

With this configuration, everything works fine... I mean I've got no errors bundling, extracting and so on. The result from webpack is:

output console

Hash: b1b509a3859c92631535
Version: webpack 3.6.0
Time: 3151ms
                          Asset     Size  Chunks                    Chunk Names
     cotizacion-mantencion.html  3.83 kB          [emitted]
             img/small-logo.png  1.43 kB          [emitted]
              img/team-work.jpg   561 kB          [emitted]  [big]
                     index.html  7.73 kB          [emitted]
             img/team-work2.jpg   576 kB          [emitted]  [big]
               img/big-logo.png  8.88 kB          [emitted]
                mantencion.html  7.44 kB          [emitted]
          img/xs-small-logo.png  2.12 kB          [emitted]
             img/white-logo.png  5.16 kB          [emitted]
                 home.bundle.js  1.93 kB       0  [emitted]         home
           mantencion.bundle.js  1.72 kB       1  [emitted]         mantencion
cotizacion-mantencion.bundle.js  1.24 kB       2  [emitted]         cotizacion-mantencion
                       home.css  15.7 kB       0  [emitted]         home
                 mantencion.css  15.7 kB       1  [emitted]         mantencion
      cotizacion-mantencion.css  15.7 kB       2  [emitted]         cotizacion-mantencion

Everything looks fine. Actually, without the purifycss-webpack plugin, the CSS files resulted would be bigger than 15.7 kB. But, when I load the home.html and then, using the Chrome inspector tools, I check the cSS files using the Coverage option, I can see that I had some useless clases and those clases were part of, example, mantencion.html. So the resulted CSS files are based on the clases that I use within the three files and not one by one file.