Skip to content

Commit f6e6c56

Browse files
refactor: remove moduleFilename option in favor filename option
1 parent fa25d76 commit f6e6c56

File tree

6 files changed

+46
-35
lines changed

6 files changed

+46
-35
lines changed

README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -592,9 +592,11 @@ module.exports = {
592592
};
593593
```
594594

595-
### Module Filename Option
595+
### Filename Option as function
596596

597-
With the `moduleFilename` option you can use chunk data to customize the filename. This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk. In the example below, we'll use `moduleFilename` to output the generated css into a different directory.
597+
With the `filename` option you can use chunk data to customize the filename.
598+
This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk.
599+
In the example below, we'll use `filename` to output the generated css into a different directory.
598600

599601
**webpack.config.js**
600602

@@ -604,7 +606,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
604606
module.exports = {
605607
plugins: [
606608
new MiniCssExtractPlugin({
607-
moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
609+
filename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
608610
}),
609611
],
610612
module: {

src/index.js

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const pluginName = 'mini-css-extract-plugin';
2727
const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
2828
const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
2929
const REGEXP_NAME = /\[name\]/i;
30-
const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/g;
3130
const DEFAULT_FILENAME = '[name].css';
3231

3332
class MiniCssExtractPlugin {
@@ -37,7 +36,6 @@ class MiniCssExtractPlugin {
3736
this.options = Object.assign(
3837
{
3938
filename: DEFAULT_FILENAME,
40-
moduleFilename: () => this.options.filename || DEFAULT_FILENAME,
4139
ignoreOrder: false,
4240
},
4341
options
@@ -46,15 +44,24 @@ class MiniCssExtractPlugin {
4644
if (!this.options.chunkFilename) {
4745
const { filename } = this.options;
4846

49-
// Anything changing depending on chunk is fine
50-
if (filename.match(REGEXP_PLACEHOLDERS)) {
51-
this.options.chunkFilename = filename;
47+
if (typeof filename !== 'function') {
48+
const hasName = filename.includes('[name]');
49+
const hasId = filename.includes('[id]');
50+
const hasChunkHash = filename.includes('[chunkhash]');
51+
const hasContentHash = filename.includes('[contenthash]');
52+
53+
// Anything changing depending on chunk is fine
54+
if (hasChunkHash || hasContentHash || hasName || hasId) {
55+
this.options.chunkFilename = filename;
56+
} else {
57+
// Otherwise prefix "[id]." in front of the basename to make it changing
58+
this.options.chunkFilename = filename.replace(
59+
/(^|\/)([^/]*(?:\?|$))/,
60+
'$1[id].$2'
61+
);
62+
}
5263
} else {
53-
// Elsewise prefix '[id].' in front of the basename to make it changing
54-
this.options.chunkFilename = filename.replace(
55-
/(^|\/)([^/]*(?:\?|$))/,
56-
'$1[id].$2'
57-
);
64+
this.options.chunkFilename = '[id].css';
5865
}
5966
}
6067

@@ -98,8 +105,9 @@ class MiniCssExtractPlugin {
98105

99106
const filenameTemplate =
100107
chunk.filenameTemplate ||
101-
(({ chunk: chunkData }) =>
102-
this.options.moduleFilename(chunkData));
108+
(typeof this.options.filename !== 'function'
109+
? this.options.filename
110+
: ({ chunk: chunkData }) => this.options.filename(chunkData));
103111

104112
if (renderedModules.length > 0) {
105113
result.push({
@@ -169,7 +177,9 @@ class MiniCssExtractPlugin {
169177
).filter((module) => module.type === MODULE_TYPE);
170178

171179
const filenameTemplate = chunk.canBeInitial()
172-
? ({ chunk: chunkData }) => this.options.moduleFilename(chunkData)
180+
? typeof this.options.filename !== 'function'
181+
? this.options.filename
182+
: ({ chunk: chunkData }) => this.options.filename(chunkData)
173183
: this.options.chunkFilename;
174184

175185
if (renderedModules.length > 0) {
@@ -416,8 +426,9 @@ class MiniCssExtractPlugin {
416426
`${webpack.RuntimeGlobals.require}.miniCssF`,
417427
(referencedChunk) =>
418428
referencedChunk.canBeInitial()
419-
? ({ chunk: chunkData }) =>
420-
this.options.moduleFilename(chunkData)
429+
? typeof this.options.filename !== 'function'
430+
? this.options.filename
431+
: ({ chunk: chunkData }) => this.options.filename(chunkData)
421432
: this.options.chunkFilename,
422433
true
423434
)

src/plugin-options.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@
33
"additionalProperties": true,
44
"properties": {
55
"filename": {
6-
"type": "string"
6+
"anyOf": [
7+
{
8+
"type": "string"
9+
},
10+
{
11+
"instanceof": "Function"
12+
}
13+
]
714
},
815
"chunkFilename": {
916
"type": "string"
1017
},
11-
"moduleFilename": {
12-
"instanceof": "Function"
13-
},
1418
"ignoreOrder": {
1519
"type": "boolean"
1620
}

test/__snapshots__/validate-plugin-options.test.js.snap

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ exports[`validate options should throw an error on the "filename" option with "t
1111
"Mini CSS Extract Plugin Invalid Options
1212
1313
options.filename should be string
14+
options.filename should pass \\"instanceof\\" keyword validation
15+
options.filename should match some schema in anyOf
1416
"
1517
`;
1618

@@ -20,10 +22,3 @@ exports[`validate options should throw an error on the "ignoreOrder" option with
2022
options.ignoreOrder should be boolean
2123
"
2224
`;
23-
24-
exports[`validate options should throw an error on the "moduleFilename" option with "true" value 1`] = `
25-
"Mini CSS Extract Plugin Invalid Options
26-
27-
options.moduleFilename should pass \\"instanceof\\" keyword validation
28-
"
29-
`;

test/cases/moduleFilename/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports = {
1717
},
1818
plugins: [
1919
new Self({
20-
moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
20+
filename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
2121
}),
2222
],
2323
};

test/validate-plugin-options.test.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@ import MiniCssExtractPlugin from '../src';
33
describe('validate options', () => {
44
const tests = {
55
filename: {
6-
success: ['[name].css'],
6+
success: [
7+
'[name].css',
8+
({ name }) => `${name.replace('/js/', '/css/')}.css`,
9+
],
710
failure: [true],
811
},
912
chunkFilename: {
1013
success: ['[id].css'],
1114
failure: [true],
1215
},
13-
moduleFilename: {
14-
success: [({ name }) => `${name.replace('/js/', '/css/')}.css`],
15-
failure: [true],
16-
},
1716
ignoreOrder: {
1817
success: [true, false],
1918
failure: [1],

0 commit comments

Comments
 (0)