add `output.cssChunkFilename`
This commit is contained in:
parent
7806aa5c19
commit
16784692d3
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
)
|
||||
);
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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)?"
|
||||
`)
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue