CODEWITHSUNDEEP
webpack-5mini-css-extract-plugin
Jortega
Jortega

Reputation: 61

Define css file name as filename with MiniCssExtractPlugin

I'm using webpack 5 and MiniCssExtractPlugin in order to have multiple css files. All is working fine but I need to modify the name of the css file generated to match the name of the file.

test/styles.css -> test_styles.css

I managed to make it work with chunkFilename option of MiniCssExtractPlugin like:

chunkFilename: function (pathData, assetInfo, b) {
     return '[name].css'
}

But then i noticed that when doing the build for production the name has changed to a number like 897.

Is there a way to change that in order to make it work like the development build?

I also tried to change the name using splitChunks:

optimization: {
    splitChunks: {
         name: (module, chunks, cacheGroupKey) => {
              return 'something';
         },
    },
},

and also with the output of webpack:

output: {
   path: path.resolve(__dirname, 'lib'),
   chunkFilename: '[name].chunk.bundle.js',
   clean: true
},

In all the cases I can't get any variable that contains the data I need in order to put the name.

Thanks!

Upvotes: 0

Views: 110

Answers (0)

Related Questions