diff --git a/README.md b/README.md index 80643224..095c00f0 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ module.exports = { | **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `` at the given position | | **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag | | **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type | +| **[`skipRuntimeLoading`](#skipRuntimeLoading)** | `{Boolean}` | `false` | Whether skip runtime loading asynchronous chunks | | **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers | #### `filename` @@ -257,6 +258,36 @@ module.exports = { }; ``` +#### `skipRuntimeLoading` + +##### `Boolean` + +An option to skip runtime loading asynchronous chunks by the current plugin, and developers can determine when to load by using other plugins. + +`true` to skip. + +**webpack.config.js** + +```js +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + +module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + skipRuntimeLoading: true, + }), + ], + module: { + rules: [ + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, "css-loader"], + }, + ], + }, +}; +``` + #### `experimentalUseImportModule` Use an experimental webpack API to execute modules instead of child compilers. diff --git a/src/index.js b/src/index.js index 70dabae2..62b96adb 100644 --- a/src/index.js +++ b/src/index.js @@ -554,7 +554,7 @@ class MiniCssExtractPlugin { } generate() { - const { chunk, runtimeRequirements } = this; + const { chunk, runtimeRequirements, runtimeOptions } = this; const { runtimeTemplate, outputOptions: { crossOriginLoading }, @@ -568,7 +568,7 @@ class MiniCssExtractPlugin { RuntimeGlobals.hmrDownloadUpdateHandlers ); - if (!withLoading && !withHmr) { + if (runtimeOptions.skipRuntimeLoading || (!withLoading && !withHmr)) { return null; } @@ -577,9 +577,9 @@ class MiniCssExtractPlugin { "chunkId, fullhref, resolve, reject", [ 'var linkTag = document.createElement("link");', - this.runtimeOptions.attributes + runtimeOptions.attributes ? Template.asString( - Object.entries(this.runtimeOptions.attributes).map( + Object.entries(runtimeOptions.attributes).map( (entry) => { const [key, value] = entry; @@ -591,9 +591,9 @@ class MiniCssExtractPlugin { ) : "", 'linkTag.rel = "stylesheet";', - this.runtimeOptions.linkType + runtimeOptions.linkType ? `linkTag.type = ${JSON.stringify( - this.runtimeOptions.linkType + runtimeOptions.linkType )};` : "", `var onLinkComplete = ${runtimeTemplate.basicFunction("event", [ @@ -627,11 +627,11 @@ class MiniCssExtractPlugin { "}", ]) : "", - typeof this.runtimeOptions.insert !== "undefined" - ? typeof this.runtimeOptions.insert === "function" - ? `(${this.runtimeOptions.insert.toString()})(linkTag)` + typeof runtimeOptions.insert !== "undefined" + ? typeof runtimeOptions.insert === "function" + ? `(${runtimeOptions.insert.toString()})(linkTag)` : Template.asString([ - `var target = document.querySelector("${this.runtimeOptions.insert}");`, + `var target = document.querySelector("${runtimeOptions.insert}");`, `target.parentNode.insertBefore(linkTag, target.nextSibling);`, ]) : Template.asString(["document.head.appendChild(linkTag);"]),