Mini-css-extract-plugin: Can filename/chunkFilename support function type ?

[Fuji-sunny]

Much thanks for this project!

Here my project is a multi-page project, which means that I need my dist directory to be like this:
dist/
|---a/
| |---js/
| | |---a.js
| |---css/
| | |---a.css
| |---html/
| | |---a.html
|---b/
| |---js/
| | |---b.js
| |---css/
| | |---b.css
| |---html/
| | |---b.html

The entry point is 'xxx/js/xxx.js' so the [filename] in mini-css-extract-plugin is 'xxx/js/xxx'.
After webpack build my css files are in the [xxx/js/] directory, not my expectation [xxx/css/] directory.

In extract-text-webpack-plugin [filename] can be a function type and provide a getPath function as its arguments.
Can mini-css-extract-plugin's [filename] support function type like this ?
Or any other suggestion about the above implementation ?

[sokra]

Send a PR to allow function for filename

[lcxfs1991]

@sokra Are you going to submit a PR recently?

[alexander-akait]

Feel free to send PR :+1:

[lcxfs1991]

@evilebottnawi Haha. Actually I send the PR for extract-text-webpack-plugin before. Let me think of it.

[lcxfs1991]

@evilebottnawi @sokra

I look into the source code today and find that a bit difficult to just pass a function to filename option.

Any suggestions for what we can do?

[alexander-akait]

@lcxfs1991 https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L103 just add your code before, check on function and if function run it and save in filename

[lcxfs1991]

@evilebottnawi Are you at Gitter? Let me discuss with you there.

[alexander-akait]

@lcxfs1991 give me link

[lcxfs1991]

@evilebottnawi https://gitter.im/webpack/webpack

[davityavryan]

Hi guys,
Any news regarding this change?

[alexander-akait]

PR welcome

[Fuji-sunny]

Is there any update with this issue?

[glen-84]

@Fuji-sunny See #145.

[domonique-ncino]

It will be great if this gets merged in

[rohmann]

It looks like you can set filename to a function if chunkFilename is also set. For example:

new MiniCssExtractPlugin({
      filename: ({ chunk }) => `dist/${entries[chunk.name].dest}`,
      chunkFilename: '[id]'
    })

Unless I'm missing something, maybe this just needs a bit of documentation and better error handling?

[ghost]

Try to use moduleFilename. You don't need to set chunkFilename.

new MiniCssExtractPlugin({
  moduleFilename: (chunk) => `dist/${chunk.name}.css`
}),

This works fine :)

[silkfire]

@evilebottnawi The moduleFilename option doesn't seem to work when using runtimeChunk. Why is that?

[alexander-akait]

Fixed https://github.com/webpack-contrib/mini-css-extract-plugin/pull/602, chunkFilename as Function available on for webpack@5, webpack@5 release will be 2020-10-10

[alexander-akait]

moduleFilename was removed in favor filename/chunkFilename