Skip to content

Commit 1678469

Browse files
sokrasokra
committed
add output.cssChunkFilename 
1 parent 7806aa5 commit 1678469

14 files changed

Lines changed: 88 additions & 19 deletions

File tree

‎declarations/WebpackOptions.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -443,6 +443,10 @@ export type CompareBeforeEmit = boolean;
443443
* This option enables cross-origin loading of chunks.
444444
*/
445445
export type CrossOriginLoading = false | "anonymous" | "use-credentials";
446+
/**
447+
* Specifies the filename template of non-initial output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
448+
*/
449+
export type CssChunkFilename = FilenameTemplate;
446450
/**
447451
* Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
448452
*/
@@ -1980,6 +1984,10 @@ export interface Output {
19801984
* This option enables cross-origin loading of chunks.
19811985
*/
19821986
crossOriginLoading?: CrossOriginLoading;
1987+
/**
1988+
* Specifies the filename template of non-initial output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
1989+
*/
1990+
cssChunkFilename?: CssChunkFilename;
19831991
/**
19841992
* Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
19851993
*/
@@ -3132,6 +3140,10 @@ export interface OutputNormalized {
31323140
* This option enables cross-origin loading of chunks.
31333141
*/
31343142
crossOriginLoading?: CrossOriginLoading;
3143+
/**
3144+
* Specifies the filename template of non-initial output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
3145+
*/
3146+
cssChunkFilename?: CssChunkFilename;
31353147
/**
31363148
* Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.
31373149
*/

‎examples/css/README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -407,7 +407,7 @@ document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_
407407
;
408408
```
409409

410-
# dist/0.output.css
410+
# dist/output.css
411411

412412
```javascript
413413
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@@ -488,11 +488,11 @@ head{--webpack-app-1:_7;}
488488
```
489489
assets by chunk 16.8 KiB (name: main)
490490
asset output.js 16.4 KiB [emitted] (name: main)
491-
asset 0.output.css 385 bytes [emitted] (name: main)
491+
asset output.css 385 bytes [emitted] (name: main)
492492
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
493493
asset 1.output.css 49 bytes [emitted]
494-
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB 0.output.css 385 bytes 1 auxiliary asset
495-
chunk (runtime: main) output.js, 0.output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.94 KiB (runtime) [entry] [rendered]
494+
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB output.css 385 bytes 1 auxiliary asset
495+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.94 KiB (runtime) [entry] [rendered]
496496
> ./example.js main
497497
runtime modules 9.94 KiB 9 modules
498498
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
@@ -514,16 +514,16 @@ webpack 5.64.4 compiled successfully
514514
```
515515
assets by chunk 4.2 KiB (name: main)
516516
asset output.js 3.82 KiB [emitted] [minimized] (name: main)
517-
asset 179.output.css 385 bytes [emitted] (name: main)
517+
asset output.css 385 bytes [emitted] (name: main)
518518
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
519519
asset 159.output.css 53 bytes [emitted]
520-
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB 179.output.css 385 bytes 1 auxiliary asset
520+
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB output.css 385 bytes 1 auxiliary asset
521521
chunk (runtime: main) 159.output.css 23 bytes
522522
> ./lazy-style.css ./example.js 4:0-26
523523
./lazy-style.css 23 bytes [built] [code generated]
524524
[no exports]
525525
import() ./lazy-style.css ./example.js 4:0-26
526-
chunk (runtime: main) output.js, 179.output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.95 KiB (runtime) [entry] [rendered]
526+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 9.95 KiB (runtime) [entry] [rendered]
527527
> ./example.js main
528528
runtime modules 9.95 KiB 9 modules
529529
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules

‎examples/css/template.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ _{{style.css}}_
1616
_{{dist/output.js}}_
1717
```
1818

19-
# dist/0.output.css
19+
# dist/output.css
2020

2121
```javascript
22-
_{{dist/0.output.css}}_
22+
_{{dist/output.css}}_
2323
```
2424

2525
## production
2626

2727
```javascript
28-
_{{production:dist/179.output.css}}_
28+
_{{production:dist/output.css}}_
2929
```
3030

3131
# dist/1.output.css

‎lib/RuntimePlugin.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -265,8 +265,10 @@ class RuntimePlugin {
265265
.for(RuntimeGlobals.getChunkCssFilename)
266266
.tap("RuntimePlugin", (chunk, set) => {
267267
if (
268-
typeof compilation.outputOptions.cssFilename === "string" &&
269-
/\[(full)?hash(:\d+)?\]/.test(compilation.outputOptions.cssFilename)
268+
typeof compilation.outputOptions.cssChunkFilename === "string" &&
269+
/\[(full)?hash(:\d+)?\]/.test(
270+
compilation.outputOptions.cssChunkFilename
271+
)
270272
) {
271273
set.add(RuntimeGlobals.getFullHash);
272274
}
@@ -278,7 +280,7 @@ class RuntimePlugin {
278280
RuntimeGlobals.getChunkCssFilename,
279281
chunk =>
280282
chunk.cssFilenameTemplate ||
281-
compilation.outputOptions.cssFilename,
283+
compilation.outputOptions.cssChunkFilename,
282284
false
283285
)
284286
);

‎lib/config/defaults.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -732,6 +732,13 @@ const applyOutputDefaults = (
732732
return output.module ? "[id].mjs" : "[id].js";
733733
});
734734
F(output, "cssFilename", () => {
735+
const filename = output.filename;
736+
if (typeof filename !== "function") {
737+
return filename.replace(/\.[mc]?js(\?|$)/, ".css$1");
738+
}
739+
return "[id].css";
740+
});
741+
F(output, "cssChunkFilename", () => {
735742
const chunkFilename = output.chunkFilename;
736743
if (typeof chunkFilename !== "function") {
737744
return chunkFilename.replace(/\.[mc]?js(\?|$)/, ".css$1");

‎lib/css/CssModulesPlugin.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,8 +303,10 @@ class CssModulesPlugin {
303303
static getChunkFilenameTemplate(chunk, outputOptions) {
304304
if (chunk.cssFilenameTemplate) {
305305
return chunk.cssFilenameTemplate;
306-
} else {
306+
} else if (chunk.canBeInitial()) {
307307
return outputOptions.cssFilename;
308+
} else {
309+
return outputOptions.cssChunkFilename;
308310
}
309311
}
310312

‎schemas/WebpackOptions.check.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎schemas/WebpackOptions.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,14 @@
335335
"description": "This option enables cross-origin loading of chunks.",
336336
"enum": [false, "anonymous", "use-credentials"]
337337
},
338+
"CssChunkFilename": {
339+
"description": "Specifies the filename template of non-initial output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.",
340+
"oneOf": [
341+
{
342+
"$ref": "#/definitions/FilenameTemplate"
343+
}
344+
]
345+
},
338346
"CssFilename": {
339347
"description": "Specifies the filename template of output css files on disk. You must **not** specify an absolute path here, but the path may contain folders separated by '/'! The specified path is joined with the value of the 'output.path' option to determine the location on disk.",
340348
"oneOf": [
@@ -2980,6 +2988,9 @@
29802988
"crossOriginLoading": {
29812989
"$ref": "#/definitions/CrossOriginLoading"
29822990
},
2991+
"cssChunkFilename": {
2992+
"$ref": "#/definitions/CssChunkFilename"
2993+
},
29832994
"cssFilename": {
29842995
"$ref": "#/definitions/CssFilename"
29852996
},
@@ -3176,6 +3187,9 @@
31763187
"crossOriginLoading": {
31773188
"$ref": "#/definitions/CrossOriginLoading"
31783189
},
3190+
"cssChunkFilename": {
3191+
"$ref": "#/definitions/CssChunkFilename"
3192+
},
31793193
"cssFilename": {
31803194
"$ref": "#/definitions/CssFilename"
31813195
},

‎test/Defaults.unittest.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,7 @@ describe("Defaults", () => {
307307
"clean": undefined,
308308
"compareBeforeEmit": true,
309309
"crossOriginLoading": false,
310+
"cssChunkFilename": "[name].css",
310311
"cssFilename": "[name].css",
311312
"devtoolFallbackModuleFilenameTemplate": undefined,
312313
"devtoolModuleFilenameTemplate": undefined,
@@ -989,8 +990,10 @@ describe("Defaults", () => {
989990
- "chunkFilename": "[name].js",
990991
+ "chunkFilename": "[id].bundle.js",
991992
@@ ... @@
993+
- "cssChunkFilename": "[name].css",
992994
- "cssFilename": "[name].css",
993-
+ "cssFilename": "[id].bundle.css",
995+
+ "cssChunkFilename": "[id].bundle.css",
996+
+ "cssFilename": "bundle.css",
994997
@@ ... @@
995998
- "filename": "[name].js",
996999
+ "filename": "bundle.js",
@@ -1005,7 +1008,9 @@ describe("Defaults", () => {
10051008
- "chunkFilename": "[name].js",
10061009
+ "chunkFilename": "[id].js",
10071010
@@ ... @@
1011+
- "cssChunkFilename": "[name].css",
10081012
- "cssFilename": "[name].css",
1013+
+ "cssChunkFilename": "[id].css",
10091014
+ "cssFilename": "[id].css",
10101015
@@ ... @@
10111016
- "filename": "[name].js",

‎test/Validation.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ describe("Validation", () => {
497497
expect(msg).toMatchInlineSnapshot(`
498498
"Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
499499
- configuration.output has an unknown property 'ecmaVersion'. These properties are valid:
500-
object { assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, cssFilename?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
500+
object { assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, cssChunkFilename?, cssFilename?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
501501
-> Options affecting the output of the compilation. \`output\` options tell webpack how to write the compiled files to disk.
502502
Did you mean output.environment (output.ecmaVersion was a temporary configuration option during webpack 5 beta)?"
503503
`)

0 commit comments

Comments
 (0)