Make webpack use different postcss/purgecss configs for different entries within one file

65 Views Asked by At

I have 11 entries.

const entries = require('./entries');
module.exports = {
  entry: entries,
  output: {
    path: build,
    filename: '[name]/js/bundle.js',
    clean: true,
  },
  // the rest of code
}

I use PurgeCSS to remove unused css. I use PurgeCSS in PostCSS config:

module.exports = {
  plugins: [
    require('cssnano')({
      preset: 'default',
    }),
    require('autoprefixer'),
    purgecss({
      content: [paths of files to clean],
    }),
  ],
};

What I need to do is to make webpack watch specific file for a respective entry. So if "home" entry is processed I want webpack to watch home.php in content field of PurgeCSS. When the entry is "about" I want webpack to watch about.php and so on. I managed to do it with env variables but it doesn't seem to be working correctly and I can't find the problem. I want to do it within one webpack.common.js file and not create multiple webpack dev and prod configs and postcss configs for every single entry. May be there is a way to get entry name while webpack is making a bundle, but I didn't find how it's done. May be there is another solution for this. Would be very happy to see any help.

0

There are 0 best solutions below