CODEWITHSUNDEEP
csswebpackmini-css-extract-plugin
Pete
Pete

Reputation: 58462

webpack conditional css filename output dependent on entry name

I have the following config for my webpack which all works and creates css files with a content hash appended to the filenames:

entry: {
  main: 'js/main',
  checkout: 'js/checkout',
  iframe: 'js/iframe',
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css"
  }),
],

I want to add a new entry point for the sahdow dom and create a css file that doesn't have the hash appended to it - is there a way to edit the config to do this?

something like the below, but with filename instead of moduleFilename:

entry: {
  main: 'js/main',
  checkout: 'js/checkout',
  iframe: 'js/iframe',
  shadow: 'js/shadow',
},
plugins: [
  new MiniCssExtractPlugin({
    moduleFilename: ({ name }) => name === 'shadow' ? '[name].css' : '[name].[contenthash].css',
  }),
],

Or alternatively, is there a way I can get the hashed filename to import into my shadow dom?

Upvotes: 1

Views: 689

Answers (1)

K.Walentkowski
K.Walentkowski

Reputation: 26

I'm using Webpack 5.50 and MiniCSSExtractPlugin 2.2.0. It turns out that {name} is nested in a property {chunk} so your example works with the code below:

   new MiniCssExtractPlugin({
       filename: ({ chunk: {name} }) => name === 'shadow' ?
           '[name].css' :
           '[name].[contenthash].css'
   }),

Upvotes: 1

Related Questions