feat(index): allow `filename` to be a `{Function}` (`options.filename`) #225

owlyowl · 2018-08-03T06:55:10Z

Clean up as per feedback by @shellscape

`Issues`

Fixes Can filename/chunkFilename support function type ? #67

Store filename in options, this way function is called once

jsf-clabot · 2018-08-03T06:55:12Z

All committers have signed the CLA.

alexander-akait

Please describe use case, also please improve docs

…, Adding try catch err

owlyowl · 2018-08-06T02:09:50Z

@evilebottnawi

This PR contains a:
new feature
test update

Motivation / Use-Case
Updated Readme.md to include a use case.

closes #143 and implements improvements as per @shellscape feedback here: https://github.com/webpack-contrib/mini-css-extract-plugin/pull/145

With the deprecation of ExtractTextPlugin for Webpack 4 we need to implement this feature to be at parity with what we had in ExtractTextPlugin with regards to filename options.

This is handy for multiple entry point implementation.

danechitoaie · 2018-09-17T15:24:39Z

Any idea when this will be released. Really needing this feature.

dankanze · 2018-09-27T19:35:38Z

Status?

alexander-akait · 2018-09-27T19:37:10Z

Need rebase

gianlucalarizza · 2018-11-15T05:53:09Z

Hi, I've been waiting for this feature . it would be nice if it were released. I am using Extract Text Plugin in beta for webpack 4 and I would be happy to dismiss it as soon as possible. Many many thanks

sokra · 2018-11-15T11:54:45Z

src/index.js

-                        shortChunkHashMap[chunkId] = chunkMaps.hash[
+            let chunkFilename;
+            try {
+              chunkFilename = JSON.stringify(


That's incorrect. chunkFilename can't be a function. The chunkFilename generation logic need to be embedded into the runtime code.

chunk is the runtime chunk here and the referenced chunk is not known.

sokra · 2018-11-15T11:54:57Z

test/cases/filename-function/webpack.config.js

+  plugins: [
+    new Self({
+      filename: (chunk) => chunk.name == 'app' ? 'this.is.app.css' : `[name].css`,
+      chunkFilename: (chunk) => '[name].css',


chunkFilename can't be a function

sokra · 2018-11-15T11:55:55Z

src/index.js

@@ -170,7 +170,7 @@ class MiniCssExtractPlugin {
                  renderedModules,
                  compilation.runtimeTemplate.requestShortener
                ),
-              filenameTemplate: this.options.filename,
+              filenameTemplate: this.getFilename(chunk, this.options.filename),


I believe you can pass a function to filenameTemplate too. webpack will call it with an information object.

sokra · 2018-11-15T11:56:01Z

src/index.js

@@ -194,7 +194,10 @@ class MiniCssExtractPlugin {
                  renderedModules,
                  compilation.runtimeTemplate.requestShortener
                ),
-              filenameTemplate: this.options.chunkFilename,
+              filenameTemplate: this.getFilename(


sokra · 2018-11-15T11:56:10Z

src/index.js

@@ -366,6 +378,10 @@ class MiniCssExtractPlugin {
    });
  }

+  getFilename(chunk, filename) {


gianlucalarizza · 2018-11-19T08:15:52Z

Dear @sokra,
at what point is the level of approval of the request? Do you think it can be released in times. For many of us, using the filename option as a function is really very important to choose this plugin for Webpack 4. Thank you for your work

pawelwieladek · 2018-12-06T07:31:36Z

Dear @owlyowl
My team is waiting for this feature. I would be grateful if you release it. Thanks!

gianlucalarizza · 2018-12-06T08:59:31Z

Dear @owlyowl
My team is waiting for this feature. I would be grateful if you release it. Thanks!

my team is also waiting for this release.
We are using extract-text-webpack-plugin 4.0 beta version, but since webpack v4 the extract-text-webpack-plugin should not be used for css. :(

alexander-akait · 2018-12-06T09:56:07Z

Feel free to create new PR looks this abadoned

kevinchappell · 2018-12-06T11:23:36Z

@evilebottnawi I just saw this PR after opening #321. I'll use the comments here as a guide to improve #321.

domonique-ncino · 2018-12-18T17:47:58Z

Can't wait until this is merged!!!

alexander-akait · 2018-12-19T12:06:18Z

Need rebase

jrjacobs24 · 2019-04-18T21:35:52Z

Is there any update on when this is expected to get merged? Until then, I found a workaround that seemed to work well for me. I originally had a function for the filename option working, then for some reason after a bit of cleanup I started getting an error and my build would fail. The original error I was seeing was:

TypeError: filename.includes is not a function
    at new MiniCssExtractPlugin (.../node_modules/mini-css-extract-plugin/dist/index.js:139:32)

So I jumped into the code to get more context as to why it was failing and found the line that was causing the error was wrapped in a conditional check for the chunkFileName on ln129. That's when it hit me that the change that I had made that caused it to fail was me removing the chunkFileName because I didn't think I needed it.

Apparently I do though until this PR gets merged. But for those in the same boat I was in, utilizing the chunkFileName option may do the trick for you:

new MiniCssExtractPlugin({
  filename: (chunkData) => {
    const name = chunkData.chunk.name.replace('js/build/', '').replace('components', 'base');

    return `scss/build/${name}-theme.css`;
  },
  chunkFilename: 'scss/build/[name]-theme.css',
})

alexander-akait · 2019-04-19T10:53:36Z

@jrjacobs24 PR was abandoned, can you send it again?

jrjacobs24 · 2019-04-19T14:01:28Z

@evilebottnawi What did you need me to send again? I didn't have anything to do with this PR originally, but I'm happy to help see it through if needed 👍

alexander-akait · 2019-04-19T14:03:45Z

👍 Need resend this PR

shanecav84 · 2019-06-27T18:34:57Z

@evilebottnawi Does #381 do the same thing as what's being requested?

alexander-akait · 2019-06-28T11:06:26Z

@shanecav84 no

shanecav84 · 2019-06-28T12:00:15Z

These look to have overlapping functionality:

moduleFilename (in master):

this.options = Object.assign(
  {
    filename: DEFAULT_FILENAME,
    moduleFilename: () => options.filename || DEFAULT_FILENAME,
  },
  options
)
...
filenameTemplate: ({ chunk: chunkData }) =>
  this.options.moduleFilename(chunkData)

filename (this PR):

this.options = Object.assign({ filename: '[name].css' }, options)
...
filenameTemplate: this.getFilename(chunk, this.options.filename)
...
getFilename(chunk, filename) {
  return typeof filename === 'function' ? filename(chunk) : filename;
}

alexander-akait · 2019-06-28T12:04:13Z

@shanecav84 one option for non async chunk other option for async chunk, sometimes developers need this, but i agree we should simplify this, PR welcome

shanecav84 · 2019-06-28T12:26:13Z

I could help. I'm still not understanding though.

one option for non async chunk other option for async chunk

Which option is which?

Why not just have filename accept a string or a function (like webpack), and point moduleFilename to filename for backward compatibility?

this.options = Object.assign(
  {
    filename: options.filename || DEFAULT_FILENAME,
    moduleFilename: () => options.filename,
  },
  options
)
...
filenameTemplate: typeof this.options.filename === 'function' 
  ? this.options.filename(chunk) 
  : filename

alexander-akait · 2019-06-28T12:31:09Z

@shanecav84 filename !== moduleFilename in some cases, but we can use filename for moduleFilename by default, PR welcome

shanecav84 · 2019-07-01T15:44:59Z

I'm working on rebasing this branch on master. The conflict is here, where both filename and moduleName are being used to set filenameTemplate. Which should we use?

owlyowl · 2019-07-02T07:16:05Z

Sorry for the delay in sorting this PR out. Thanks @shanecav84 and @evilebottnawi
If you let me know how you'd like the conflict resolved I'm happy to sort it out..

I've tried using the @jrjacobs24 workaround without success as I'm generating some theme based style sheets in production. What it results in is making a bunch of css files with hashes in the names that are webpackbootstrap JS so any subsequent css processing fails as the css files actually contain javascript.. see here:

See Here

I'd love to know how to fix this it is driving me insane. Having this feature PR'd in would sort it out I suspect but master has moved out from under me sorry. @evilebottnawi any idea how you'd like the merge conflict corrected?

codecov · 2020-04-23T05:29:16Z

Codecov Report

Merging #225 into master will not change coverage.
The diff coverage is 0.00%.

@@          Coverage Diff           @@
##           master    #225   +/-   ##
======================================
  Coverage    0.00%   0.00%           
======================================
  Files           3       3           
  Lines         241     246    +5     
  Branches       49      50    +1     
======================================
- Misses        198     202    +4     
- Partials       43      44    +1

Impacted Files	Coverage Δ
src/index.js	`0.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 41347f7...6012a49. Read the comment docs.

alexander-akait · 2020-10-09T11:29:31Z

Supported

berthertogen added 6 commits May 14, 2018 13:45

feat: allow filename to be a function

85f6eda

feat: update tests

52cf7f6

feat: remove throw and change isFunction

cf7b731

feat: pass correct chunk

a06f5df

feat: fix test and names

835624c

feat: remove console.log's

44cd88f

Store filename in options, this way function is called once

owlyowl force-pushed the feat/143-filename-function branch 14 times, most recently from 945943f to 378c955 Compare August 3, 2018 08:18

alexander-akait requested changes Aug 3, 2018

View reviewed changes

owlyowl force-pushed the feat/143-filename-function branch from 378c955 to 3149f26 Compare August 6, 2018 01:54

Filename as a function - Added to README.md, Clean up as per feedback…

5b45d7e

…, Adding try catch err

owlyowl force-pushed the feat/143-filename-function branch from 3149f26 to 5b45d7e Compare August 6, 2018 02:06

michael-ciniawsky changed the title ~~Feat/143 filename function - Clean up as per feedback by @shellscape~~ feat: allow filename to be a {Function} Aug 6, 2018

michael-ciniawsky added this to the 0.5.0 milestone Aug 6, 2018

michael-ciniawsky added type: feature semver: minor labels Aug 6, 2018

michael-ciniawsky requested a review from ooflorent August 24, 2018 20:28

sokra requested changes Nov 15, 2018

View reviewed changes

alexander-akait closed this Oct 9, 2020

alexander-akait reopened this Oct 9, 2020

alexander-akait closed this Oct 9, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(index): allow `filename` to be a `{Function}` (`options.filename`) #225

feat(index): allow `filename` to be a `{Function}` (`options.filename`) #225

owlyowl commented Aug 3, 2018 •

edited by michael-ciniawsky

jsf-clabot commented Aug 3, 2018 •

edited

alexander-akait left a comment

owlyowl commented Aug 6, 2018 •

edited

danechitoaie commented Sep 17, 2018

dankanze commented Sep 27, 2018

alexander-akait commented Sep 27, 2018

gianlucalarizza commented Nov 15, 2018

sokra Nov 15, 2018

sokra Nov 15, 2018

sokra Nov 15, 2018

sokra Nov 15, 2018

sokra Nov 15, 2018

gianlucalarizza commented Nov 19, 2018

pawelwieladek commented Dec 6, 2018

gianlucalarizza commented Dec 6, 2018 •

edited

alexander-akait commented Dec 6, 2018

kevinchappell commented Dec 6, 2018

domonique-ncino commented Dec 18, 2018

alexander-akait commented Dec 19, 2018

jrjacobs24 commented Apr 18, 2019

alexander-akait commented Apr 19, 2019

jrjacobs24 commented Apr 19, 2019

alexander-akait commented Apr 19, 2019

shanecav84 commented Jun 27, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jun 28, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jun 28, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jul 1, 2019 •

edited

owlyowl commented Jul 2, 2019 •

edited

codecov bot commented Apr 23, 2020 •

edited

alexander-akait commented Oct 9, 2020

feat(index): allow filename to be a {Function} (options.filename) #225

feat(index): allow filename to be a {Function} (options.filename) #225

Conversation

owlyowl commented Aug 3, 2018 • edited by michael-ciniawsky

Issues

jsf-clabot commented Aug 3, 2018 • edited

alexander-akait left a comment

Choose a reason for hiding this comment

owlyowl commented Aug 6, 2018 • edited

danechitoaie commented Sep 17, 2018

dankanze commented Sep 27, 2018

alexander-akait commented Sep 27, 2018

gianlucalarizza commented Nov 15, 2018

sokra Nov 15, 2018

Choose a reason for hiding this comment

sokra Nov 15, 2018

Choose a reason for hiding this comment

sokra Nov 15, 2018

Choose a reason for hiding this comment

sokra Nov 15, 2018

Choose a reason for hiding this comment

sokra Nov 15, 2018

Choose a reason for hiding this comment

gianlucalarizza commented Nov 19, 2018

pawelwieladek commented Dec 6, 2018

gianlucalarizza commented Dec 6, 2018 • edited

alexander-akait commented Dec 6, 2018

kevinchappell commented Dec 6, 2018

domonique-ncino commented Dec 18, 2018

alexander-akait commented Dec 19, 2018

jrjacobs24 commented Apr 18, 2019

alexander-akait commented Apr 19, 2019

jrjacobs24 commented Apr 19, 2019

alexander-akait commented Apr 19, 2019

shanecav84 commented Jun 27, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jun 28, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jun 28, 2019

alexander-akait commented Jun 28, 2019

shanecav84 commented Jul 1, 2019 • edited

owlyowl commented Jul 2, 2019 • edited

codecov bot commented Apr 23, 2020 • edited

Codecov Report

alexander-akait commented Oct 9, 2020

feat(index): allow `filename` to be a `{Function}` (`options.filename`) #225

feat(index): allow `filename` to be a `{Function}` (`options.filename`) #225

owlyowl commented Aug 3, 2018 •

edited by michael-ciniawsky

`Issues`

jsf-clabot commented Aug 3, 2018 •

edited

owlyowl commented Aug 6, 2018 •

edited

gianlucalarizza commented Dec 6, 2018 •

edited

shanecav84 commented Jul 1, 2019 •

edited

owlyowl commented Jul 2, 2019 •

edited

codecov bot commented Apr 23, 2020 •

edited