FullHuman/purgecss-webpack-plugin

How to use PurgeCSS with extract-css-chunks-webpack-plugin

hypervillain opened this issue · 1 comments

Hello,

I would like to use PurgeCss in addition to css-chunks-html-webpack-plugin and extract-css-chunks-webpack-plugin.

Following the documentation, I ended up doing sometthing like :

`

  const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CssChunkHashPlugin = require('../lib');


  module.exports = {
    plugins: [
      new ExtractCssChunks(),
      new CssChunkHashPlugin({ inject: true }),
      new PurgecssPlugin({
         paths: glob.sync(`${PATHS.style}/*`),
      }),
      new HtmlWebpackPlugin({...entryFileOptions}),
    ]
  };

`

Which obviously doesn't work - I believe it's to be expected as I can't provide a list of static entry points to the purge plugin. As you said earlier, it's always good to have examples and I would love someone to put me in the right direction for this.

Thanks for your time

Hey, Thanks for creating this issue.
Purgecss should be compatible with extract-css-chunks-webpack-plugin but I have not tested that yet.

The first thing I noticed was that it looks like you are passing only your style files to path with glob.sync(${PATHS.style}/*), you actually don't need to pass the style files into purgecss in webpack, they come from webpack itself.
You should be passing the template files in path, so your html/php/pug/ejs/etc... files.

Please try to change that and see if it works