diff --git a/README.md b/README.md index 80643224..d9fa7b91 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/package.json b/package.json index 42258f5b..9ce12792 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "prebuild": "npm run clean", "build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files", "postbuild": "es-check es5 dist/hmr/hotModuleReplacement.js", - "clean": "del-cli dist", + "clean": "node -p \"require('fs').existsSync('dist') && require('fs').rmdirSync('dist', {recursive: true})\"", "commitlint": "commitlint --from=master", "lint:prettier": "prettier \"{**/*,*}.{js,json,md,yml,css,ts}\" --list-different", "lint:js": "eslint --cache .", @@ -57,7 +57,6 @@ "cross-env": "^7.0.3", "css-loader": "^5.2.6", "del": "^6.0.0", - "del-cli": "^4.0.0", "es-check": "^6.0.0", "eslint": "^7.30.0", "eslint-config-prettier": "^8.1.0", 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);"]), diff --git a/src/plugin-options.json b/src/plugin-options.json index 7a4ce2c6..e51aecd0 100644 --- a/src/plugin-options.json +++ b/src/plugin-options.json @@ -65,6 +65,11 @@ ], "description": "This option allows loading asynchronous chunks with a custom link type", "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#linktype" + }, + "skipRuntimeLoading": { + "type": "boolean", + "description": "An option to skip runtime loading asynchronous chunks by the current plugin, and developers can determine when to load by using other plugins.", + "link": "https://github.com/webpack-contrib/mini-css-extract-plugin#experimentaluseimportmodule" } } } diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap b/test/__snapshots__/validate-plugin-options.test.js.snap index 8894c2b7..8720e18f 100644 --- a/test/__snapshots__/validate-plugin-options.test.js.snap +++ b/test/__snapshots__/validate-plugin-options.test.js.snap @@ -117,47 +117,47 @@ exports[`validate options should throw an error on the "linkType" option with "i exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `; exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = ` "Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema. - options has an unknown property 'unknown'. These properties are valid: - object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }" + object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType?, skipRuntimeLoading? }" `;