add `output.cssChunkFilename`

This commit is contained in:
Tobias Koppers 2021-12-17 12:18:01 +01:00
parent 7806aa5c19
commit 16784692d3
14 changed files with 88 additions and 19 deletions

View File

@ -443,6 +443,10 @@ export type CompareBeforeEmit = boolean;
* This option enables cross-origin loading of chunks.
*/
export type CrossOriginLoading = false | "anonymous" | "use-credentials";
/**
* 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.
*/
export type CssChunkFilename = FilenameTemplate;
/**
* 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.
*/
@ -1980,6 +1984,10 @@ export interface Output {
* This option enables cross-origin loading of chunks.
*/
crossOriginLoading?: CrossOriginLoading;
/**
* 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.
*/
cssChunkFilename?: CssChunkFilename;
/**
* 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.
*/
@ -3132,6 +3140,10 @@ export interface OutputNormalized {
* This option enables cross-origin loading of chunks.
*/
crossOriginLoading?: CrossOriginLoading;
/**
* 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.
*/
cssChunkFilename?: CssChunkFilename;
/**
* 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.
*/

View File

@ -407,7 +407,7 @@ document.getElementsByTagName("main")[0].className = _style_module_css__WEBPACK_
;
```
# dist/0.output.css
# dist/output.css
```javascript
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@ -488,11 +488,11 @@ head{--webpack-app-1:_7;}
```
assets by chunk 16.8 KiB (name: main)
asset output.js 16.4 KiB [emitted] (name: main)
asset 0.output.css 385 bytes [emitted] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 1.output.css 49 bytes [emitted]
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB 0.output.css 385 bytes 1 auxiliary asset
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]
Entrypoint main 16.8 KiB (14.6 KiB) = output.js 16.4 KiB output.css 385 bytes 1 auxiliary asset
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]
> ./example.js main
runtime modules 9.94 KiB 9 modules
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
```
assets by chunk 4.2 KiB (name: main)
asset output.js 3.82 KiB [emitted] [minimized] (name: main)
asset 179.output.css 385 bytes [emitted] (name: main)
asset output.css 385 bytes [emitted] (name: main)
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
asset 159.output.css 53 bytes [emitted]
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB 179.output.css 385 bytes 1 auxiliary asset
Entrypoint main 4.2 KiB (14.6 KiB) = output.js 3.82 KiB output.css 385 bytes 1 auxiliary asset
chunk (runtime: main) 159.output.css 23 bytes
> ./lazy-style.css ./example.js 4:0-26
./lazy-style.css 23 bytes [built] [code generated]
[no exports]
import() ./lazy-style.css ./example.js 4:0-26
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]
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]
> ./example.js main
runtime modules 9.95 KiB 9 modules
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules

View File

@ -16,16 +16,16 @@ _{{style.css}}_
_{{dist/output.js}}_
```
# dist/0.output.css
# dist/output.css
```javascript
_{{dist/0.output.css}}_
_{{dist/output.css}}_
```
## production
```javascript
_{{production:dist/179.output.css}}_
_{{production:dist/output.css}}_
```
# dist/1.output.css

View File

@ -265,8 +265,10 @@ class RuntimePlugin {
.for(RuntimeGlobals.getChunkCssFilename)
.tap("RuntimePlugin", (chunk, set) => {
if (
typeof compilation.outputOptions.cssFilename === "string" &&
/\[(full)?hash(:\d+)?\]/.test(compilation.outputOptions.cssFilename)
typeof compilation.outputOptions.cssChunkFilename === "string" &&
/\[(full)?hash(:\d+)?\]/.test(
compilation.outputOptions.cssChunkFilename
)
) {
set.add(RuntimeGlobals.getFullHash);
}
@ -278,7 +280,7 @@ class RuntimePlugin {
RuntimeGlobals.getChunkCssFilename,
chunk =>
chunk.cssFilenameTemplate ||
compilation.outputOptions.cssFilename,
compilation.outputOptions.cssChunkFilename,
false
)
);

View File

@ -732,6 +732,13 @@ const applyOutputDefaults = (
return output.module ? "[id].mjs" : "[id].js";
});
F(output, "cssFilename", () => {
const filename = output.filename;
if (typeof filename !== "function") {
return filename.replace(/\.[mc]?js(\?|$)/, ".css$1");
}
return "[id].css";
});
F(output, "cssChunkFilename", () => {
const chunkFilename = output.chunkFilename;
if (typeof chunkFilename !== "function") {
return chunkFilename.replace(/\.[mc]?js(\?|$)/, ".css$1");

View File

@ -303,8 +303,10 @@ class CssModulesPlugin {
static getChunkFilenameTemplate(chunk, outputOptions) {
if (chunk.cssFilenameTemplate) {
return chunk.cssFilenameTemplate;
} else {
} else if (chunk.canBeInitial()) {
return outputOptions.cssFilename;
} else {
return outputOptions.cssChunkFilename;
}
}

File diff suppressed because one or more lines are too long

View File

@ -335,6 +335,14 @@
"description": "This option enables cross-origin loading of chunks.",
"enum": [false, "anonymous", "use-credentials"]
},
"CssChunkFilename": {
"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.",
"oneOf": [
{
"$ref": "#/definitions/FilenameTemplate"
}
]
},
"CssFilename": {
"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.",
"oneOf": [
@ -2980,6 +2988,9 @@
"crossOriginLoading": {
"$ref": "#/definitions/CrossOriginLoading"
},
"cssChunkFilename": {
"$ref": "#/definitions/CssChunkFilename"
},
"cssFilename": {
"$ref": "#/definitions/CssFilename"
},
@ -3176,6 +3187,9 @@
"crossOriginLoading": {
"$ref": "#/definitions/CrossOriginLoading"
},
"cssChunkFilename": {
"$ref": "#/definitions/CssChunkFilename"
},
"cssFilename": {
"$ref": "#/definitions/CssFilename"
},

View File

@ -307,6 +307,7 @@ describe("Defaults", () => {
"clean": undefined,
"compareBeforeEmit": true,
"crossOriginLoading": false,
"cssChunkFilename": "[name].css",
"cssFilename": "[name].css",
"devtoolFallbackModuleFilenameTemplate": undefined,
"devtoolModuleFilenameTemplate": undefined,
@ -989,8 +990,10 @@ describe("Defaults", () => {
- "chunkFilename": "[name].js",
+ "chunkFilename": "[id].bundle.js",
@@ ... @@
- "cssChunkFilename": "[name].css",
- "cssFilename": "[name].css",
+ "cssFilename": "[id].bundle.css",
+ "cssChunkFilename": "[id].bundle.css",
+ "cssFilename": "bundle.css",
@@ ... @@
- "filename": "[name].js",
+ "filename": "bundle.js",
@ -1005,7 +1008,9 @@ describe("Defaults", () => {
- "chunkFilename": "[name].js",
+ "chunkFilename": "[id].js",
@@ ... @@
- "cssChunkFilename": "[name].css",
- "cssFilename": "[name].css",
+ "cssChunkFilename": "[id].css",
+ "cssFilename": "[id].css",
@@ ... @@
- "filename": "[name].js",

View File

@ -497,7 +497,7 @@ describe("Validation", () => {
expect(msg).toMatchInlineSnapshot(`
"Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.output has an unknown property 'ecmaVersion'. These properties are valid:
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? }
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? }
-> Options affecting the output of the compilation. \`output\` options tell webpack how to write the compiled files to disk.
Did you mean output.environment (output.ecmaVersion was a temporary configuration option during webpack 5 beta)?"
`)

View File

@ -5188,6 +5188,19 @@ Object {
"multiple": false,
"simpleType": "string",
},
"output-css-chunk-filename": Object {
"configs": Array [
Object {
"description": "Specifies the filename template of output 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.",
"multiple": false,
"path": "output.cssChunkFilename",
"type": "string",
},
],
"description": "Specifies the filename template of output 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.",
"multiple": false,
"simpleType": "string",
},
"output-css-filename": Object {
"configs": Array [
Object {

View File

@ -2,7 +2,7 @@ module.exports = {
moduleScope(scope) {
const link = scope.window.document.createElement("link");
link.rel = "stylesheet";
link.href = "main.bundle0.css";
link.href = "bundle0.css";
scope.window.document.head.appendChild(link);
}
};

View File

@ -2,7 +2,7 @@ module.exports = {
moduleScope(scope) {
const link = scope.window.document.createElement("link");
link.rel = "stylesheet";
link.href = "179.bundle0.css";
link.href = "bundle0.css";
scope.window.document.head.appendChild(link);
}
};

14
types.d.ts vendored
View File

@ -8171,6 +8171,13 @@ declare interface Output {
*/
crossOriginLoading?: false | "anonymous" | "use-credentials";
/**
* 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.
*/
cssChunkFilename?:
| string
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
/**
* 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.
*/
@ -8473,6 +8480,13 @@ declare interface OutputNormalized {
*/
crossOriginLoading?: false | "anonymous" | "use-credentials";
/**
* 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.
*/
cssChunkFilename?:
| string
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
/**
* 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.
*/