diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 2d349884..b7e3c225 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -80,6 +80,18 @@ jobs:
if: matrix.os == 'windows-latest'
run: npm i -g npm
+ - name: Get npm cache directory
+ id: npm-cache
+ run: |
+ echo "::set-output name=dir::$(npm config get cache)"
+
+ - uses: actions/cache@v1
+ with:
+ path: ${{ steps.npm-cache.outputs.dir }}
+ key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+ restore-keys: |
+ ${{ runner.os }}-node-
+
- name: Install dependencies
run: npm i
@@ -93,3 +105,61 @@ jobs:
uses: codecov/codecov-action@v1
with:
token: ${{ secrets.CODECOV_TOKEN }}
+
+ test2:
+ name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack latest, experimentalUseImportModule
+
+ strategy:
+ matrix:
+ os: [ubuntu-latest, windows-latest, macos-latest]
+ node-version: [10.x, 12.x, 14.x]
+
+ runs-on: ${{ matrix.os }}
+
+ steps:
+ - name: Setup Git
+ if: matrix.os == 'windows-latest'
+ run: git config --global core.autocrlf input
+
+ - uses: actions/checkout@v2
+
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v1
+ with:
+ node-version: ${{ matrix.node-version }}
+
+ - name: Use latest NPM on ubuntu/macos
+ if: matrix.os == 'ubuntu-latest' || matrix.os == 'macos-latest'
+ run: sudo npm i -g npm
+
+ - name: Use latest NPM on windows
+ if: matrix.os == 'windows-latest'
+ run: npm i -g npm
+
+ - name: Get npm cache directory
+ id: npm-cache
+ run: |
+ echo "::set-output name=dir::$(npm config get cache)"
+
+ - uses: actions/cache@v1
+ with:
+ path: ${{ steps.npm-cache.outputs.dir }}
+ key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+ restore-keys: |
+ ${{ runner.os }}-node-
+
+ - name: Install dependencies
+ run: npm i
+
+ - name: Install webpack latest
+ run: npm i webpack@latest
+
+ - name: Run tests for webpack version latest with experimentalUseImportModule
+ run: npm run test:coverage -- --ci
+ env:
+ EXPERIMENTAL_USE_IMPORT_MODULE: 'true'
+
+ - name: Submit coverage data to codecov
+ uses: codecov/codecov-action@v1
+ with:
+ token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/README.md b/README.md
index 995114aa..3934aeeb 100644
--- a/README.md
+++ b/README.md
@@ -75,14 +75,15 @@ module.exports = {
### Plugin Options
-| Name | Type | Default | Description |
-| :-----------------------------------: | :------------------: | :-----------------------------------: | :--------------------------------------------------------- |
-| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
-| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
-| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
-| **[`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 |
+| Name | Type | Default | Description |
+| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------- |
+| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
+| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
+| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
+| **[`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 |
+| **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
#### `filename`
@@ -256,6 +257,16 @@ module.exports = {
};
```
+#### `experimentalUseImportModule`
+
+Use an experimental webpack API to execute modules instead of child compilers.
+
+This improves performance and memory usage a lot, but isn't as stable as the normal approach.
+
+When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the css execution.
+
+You need to have at least webpack 5.33.2.
+
### Loader Options
| Name | Type | Default | Description |
diff --git a/package-lock.json b/package-lock.json
index 3b902153..2b44129f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,7 @@
"requires": true,
"packages": {
"": {
- "version": "1.3.9",
+ "version": "1.4.1",
"license": "MIT",
"dependencies": {
"loader-utils": "^2.0.0",
@@ -39,7 +39,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"standard-version": "^9.1.0",
- "webpack": "^5.27.1",
+ "webpack": "^5.33.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.7.2"
},
@@ -2779,9 +2779,9 @@
}
},
"node_modules/@types/eslint": {
- "version": "7.2.7",
- "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
- "integrity": "sha512-EHXbc1z2GoQRqHaAT7+grxlTJ3WE2YNeD6jlpPoRc83cCoThRY+NUWjCUZaYmk51OICkPXn2hhphcWcWXgNW0Q==",
+ "version": "7.2.9",
+ "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
+ "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
"dev": true,
"dependencies": {
"@types/estree": "*",
@@ -17789,10 +17789,11 @@
}
},
"node_modules/webpack": {
- "version": "5.27.1",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.1.tgz",
- "integrity": "sha512-rxIDsPZ3Apl3JcqiemiLmWH+hAq04YeOXqvCxNZOnTp8ZgM9NEPtbu4CaMfMEf9KShnx/Ym8uLGmM6P4XnwCoA==",
+ "version": "5.33.2",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz",
+ "integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"@types/eslint-scope": "^3.7.0",
"@types/estree": "^0.0.46",
@@ -18539,9 +18540,9 @@
}
},
"node_modules/webpack/node_modules/acorn": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
- "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
+ "version": "8.1.1",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.1.tgz",
+ "integrity": "sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
@@ -18550,15 +18551,6 @@
"node": ">=0.4.0"
}
},
- "node_modules/webpack/node_modules/source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
- "dev": true,
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/webpack/node_modules/webpack-sources": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz",
@@ -21084,9 +21076,9 @@
}
},
"@types/eslint": {
- "version": "7.2.7",
- "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
- "integrity": "sha512-EHXbc1z2GoQRqHaAT7+grxlTJ3WE2YNeD6jlpPoRc83cCoThRY+NUWjCUZaYmk51OICkPXn2hhphcWcWXgNW0Q==",
+ "version": "7.2.9",
+ "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
+ "integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
"dev": true,
"requires": {
"@types/estree": "*",
@@ -32748,9 +32740,9 @@
"dev": true
},
"webpack": {
- "version": "5.27.1",
- "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.27.1.tgz",
- "integrity": "sha512-rxIDsPZ3Apl3JcqiemiLmWH+hAq04YeOXqvCxNZOnTp8ZgM9NEPtbu4CaMfMEf9KShnx/Ym8uLGmM6P4XnwCoA==",
+ "version": "5.33.2",
+ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz",
+ "integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.0",
@@ -32779,15 +32771,9 @@
},
"dependencies": {
"acorn": {
- "version": "8.1.0",
- "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
- "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
- "dev": true
- },
- "source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "version": "8.1.1",
+ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.1.tgz",
+ "integrity": "sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g==",
"dev": true
},
"webpack-sources": {
diff --git a/package.json b/package.json
index 26abd63e..d9fdec3b 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"standard-version": "^9.1.0",
- "webpack": "^5.27.1",
+ "webpack": "^5.33.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.7.2"
},
diff --git a/src/index.js b/src/index.js
index c5483c46..4c1b009a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -309,7 +309,11 @@ class MiniCssExtractPlugin {
this._sortedModulesCache = new WeakMap();
this.options = Object.assign(
- { filename: DEFAULT_FILENAME, ignoreOrder: false },
+ {
+ filename: DEFAULT_FILENAME,
+ ignoreOrder: false,
+ experimentalUseImportModule: false,
+ },
options
);
@@ -355,6 +359,18 @@ class MiniCssExtractPlugin {
: // eslint-disable-next-line global-require
require('webpack');
+ if (this.options.experimentalUseImportModule) {
+ if (!compiler.options.experiments) {
+ throw new Error(
+ 'experimentalUseImportModule is only support for webpack >= 5.32.0'
+ );
+ }
+ if (typeof compiler.options.experiments.executeModule === 'undefined') {
+ // eslint-disable-next-line no-param-reassign
+ compiler.options.experiments.executeModule = true;
+ }
+ }
+
// TODO bug in webpack, remove it after it will be fixed
// webpack tries to `require` loader firstly when serializer doesn't found
if (
@@ -399,7 +415,9 @@ class MiniCssExtractPlugin {
normalModuleHook.tap(pluginName, (loaderContext) => {
// eslint-disable-next-line no-param-reassign
- loaderContext[pluginSymbol] = true;
+ loaderContext[pluginSymbol] = {
+ experimentalUseImportModule: this.options.experimentalUseImportModule,
+ };
});
});
diff --git a/src/loader-options.json b/src/loader-options.json
index a863e270..08b6933c 100644
--- a/src/loader-options.json
+++ b/src/loader-options.json
@@ -18,6 +18,9 @@
"esModule": {
"type": "boolean"
},
+ "layer": {
+ "type": "string"
+ },
"modules": {
"type": "object",
"additionalProperties": false,
diff --git a/src/loader.js b/src/loader.js
index ee8ee4c5..238700de 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -39,7 +39,8 @@ export function pitch(request) {
const callback = this.async();
- if (!this[pluginSymbol]) {
+ const optionsFromPlugin = this[pluginSymbol];
+ if (!optionsFromPlugin) {
callback(
new Error(
"You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started"
@@ -49,11 +50,130 @@ export function pitch(request) {
return;
}
- const loaders = this.loaders.slice(this.loaderIndex + 1);
+ // TODO simplify after drop webpack v4
+ // eslint-disable-next-line global-require
+ const webpack = this._compiler.webpack || require('webpack');
- this.addDependency(this.resourcePath);
+ const handleExports = (originalExports, compilation, assets, assetsInfo) => {
+ let locals;
+
+ const esModule =
+ typeof options.esModule !== 'undefined' ? options.esModule : true;
+ const namedExport =
+ esModule && options.modules && options.modules.namedExport;
+
+ const addDependencies = (dependencies) => {
+ if (!Array.isArray(dependencies) && dependencies != null) {
+ throw new Error(
+ `Exported value was not extracted as an array: ${JSON.stringify(
+ dependencies
+ )}`
+ );
+ }
+
+ const identifierCountMap = new Map();
+ const emit = typeof options.emit !== 'undefined' ? options.emit : true;
+ let lastDep;
+
+ for (const dependency of dependencies) {
+ if (!dependency.identifier || !emit) {
+ // eslint-disable-next-line no-continue
+ continue;
+ }
+
+ const count = identifierCountMap.get(dependency.identifier) || 0;
+ const CssDependency = MiniCssExtractPlugin.getCssDependency(webpack);
+
+ this._module.addDependency(
+ (lastDep = new CssDependency(dependency, dependency.context, count))
+ );
+ identifierCountMap.set(dependency.identifier, count + 1);
+ }
+
+ if (lastDep && assets) {
+ lastDep.assets = assets;
+ lastDep.assetsInfo = assetsInfo;
+ }
+ };
+
+ try {
+ // eslint-disable-next-line no-underscore-dangle
+ exports = originalExports.__esModule
+ ? originalExports.default
+ : originalExports;
+
+ if (namedExport) {
+ Object.keys(originalExports).forEach((key) => {
+ if (key !== 'default') {
+ if (!locals) {
+ locals = {};
+ }
+
+ locals[key] = originalExports[key];
+ }
+ });
+ } else {
+ locals = exports && exports.locals;
+ }
+
+ let dependencies;
+
+ if (!Array.isArray(exports)) {
+ dependencies = [[null, exports]];
+ } else {
+ dependencies = exports.map(([id, content, media, sourceMap]) => {
+ let identifier = id;
+ let context;
+ if (compilation) {
+ const module = findModuleById(compilation, id);
+ identifier = module.identifier();
+ ({ context } = module);
+ } else {
+ // TODO check if this context is used somewhere
+ context = this.rootContext;
+ }
+
+ return {
+ identifier,
+ context,
+ content: Buffer.from(content),
+ media,
+ sourceMap: sourceMap
+ ? Buffer.from(JSON.stringify(sourceMap))
+ : // eslint-disable-next-line no-undefined
+ undefined,
+ };
+ });
+ }
+
+ addDependencies(dependencies);
+ } catch (e) {
+ return callback(e);
+ }
+
+ const result = locals
+ ? namedExport
+ ? Object.keys(locals)
+ .map(
+ (key) => `\nexport const ${key} = ${JSON.stringify(locals[key])};`
+ )
+ .join('')
+ : `\n${
+ esModule ? 'export default' : 'module.exports ='
+ } ${JSON.stringify(locals)};`
+ : esModule
+ ? `\nexport {};`
+ : '';
+
+ let resultSource = `// extracted by ${pluginName}`;
+
+ resultSource += this.hot
+ ? hotLoader(result, { context: this.context, options, locals })
+ : result;
+
+ return callback(null, resultSource);
+ };
- const childFilename = '*';
const publicPath =
typeof options.publicPath === 'string'
? options.publicPath === 'auto'
@@ -67,6 +187,39 @@ export function pitch(request) {
? ''
: this._compilation.outputOptions.publicPath;
+ if (optionsFromPlugin.experimentalUseImportModule) {
+ if (!this.importModule) {
+ callback(
+ new Error(
+ "You are using experimentalUseImportModule but 'this.importModule' is not available in loader context. You need to have at least webpack 5.33.2."
+ )
+ );
+ return;
+ }
+ this.importModule(
+ `${this.resourcePath}.webpack[javascript/auto]!=!${request}`,
+ {
+ layer: options.layer,
+ publicPath,
+ },
+ (err, exports) => {
+ if (err) {
+ callback(err);
+ return;
+ }
+
+ handleExports(exports);
+ }
+ );
+ return;
+ }
+
+ const loaders = this.loaders.slice(this.loaderIndex + 1);
+
+ this.addDependency(this.resourcePath);
+
+ const childFilename = '*';
+
const outputOptions = {
filename: childFilename,
publicPath,
@@ -77,10 +230,6 @@ export function pitch(request) {
outputOptions
);
- // TODO simplify after drop webpack v4
- // eslint-disable-next-line global-require
- const webpack = this._compiler.webpack || require('webpack');
-
const { NodeTemplatePlugin } = webpack.node;
const NodeTargetPlugin = webpack.node.NodeTargetPlugin
? webpack.node.NodeTargetPlugin
@@ -195,40 +344,6 @@ export function pitch(request) {
assetsInfo.set(asset.name, asset.info);
}
- const addDependencies = (dependencies) => {
- if (!Array.isArray(dependencies) && dependencies != null) {
- throw new Error(
- `Exported value was not extracted as an array: ${JSON.stringify(
- dependencies
- )}`
- );
- }
-
- const identifierCountMap = new Map();
- const emit = typeof options.emit !== 'undefined' ? options.emit : true;
- let lastDep;
-
- for (const dependency of dependencies) {
- if (!dependency.identifier || !emit) {
- // eslint-disable-next-line no-continue
- continue;
- }
-
- const count = identifierCountMap.get(dependency.identifier) || 0;
- const CssDependency = MiniCssExtractPlugin.getCssDependency(webpack);
-
- this._module.addDependency(
- (lastDep = new CssDependency(dependency, dependency.context, count))
- );
- identifierCountMap.set(dependency.identifier, count + 1);
- }
-
- if (lastDep) {
- lastDep.assets = assets;
- lastDep.assetsInfo = assetsInfo;
- }
- };
-
if (error) {
return callback(error);
}
@@ -249,82 +364,14 @@ export function pitch(request) {
return callback(new Error("Didn't get a result from child compiler"));
}
- let locals;
-
- const esModule =
- typeof options.esModule !== 'undefined' ? options.esModule : true;
- const namedExport =
- esModule && options.modules && options.modules.namedExport;
-
+ let originalExports;
try {
- const originalExports = evalModuleCode(this, source, request);
-
- // eslint-disable-next-line no-underscore-dangle
- exports = originalExports.__esModule
- ? originalExports.default
- : originalExports;
-
- if (namedExport) {
- Object.keys(originalExports).forEach((key) => {
- if (key !== 'default') {
- if (!locals) {
- locals = {};
- }
-
- locals[key] = originalExports[key];
- }
- });
- } else {
- locals = exports && exports.locals;
- }
-
- let dependencies;
-
- if (!Array.isArray(exports)) {
- dependencies = [[null, exports]];
- } else {
- dependencies = exports.map(([id, content, media, sourceMap]) => {
- const module = findModuleById(compilation, id);
-
- return {
- identifier: module.identifier(),
- context: module.context,
- content: Buffer.from(content),
- media,
- sourceMap: sourceMap
- ? Buffer.from(JSON.stringify(sourceMap))
- : // eslint-disable-next-line no-undefined
- undefined,
- };
- });
- }
-
- addDependencies(dependencies);
+ originalExports = evalModuleCode(this, source, request);
} catch (e) {
return callback(e);
}
- const result = locals
- ? namedExport
- ? Object.keys(locals)
- .map(
- (key) => `\nexport const ${key} = ${JSON.stringify(locals[key])};`
- )
- .join('')
- : `\n${
- esModule ? 'export default' : 'module.exports ='
- } ${JSON.stringify(locals)};`
- : esModule
- ? `\nexport {};`
- : '';
-
- let resultSource = `// extracted by ${pluginName}`;
-
- resultSource += this.hot
- ? hotLoader(result, { context: this.context, options, locals })
- : result;
-
- return callback(null, resultSource);
+ return handleExports(originalExports, compilation, assets, assetsInfo);
});
}
diff --git a/src/plugin-options.json b/src/plugin-options.json
index 04e5c9ed..509803a6 100644
--- a/src/plugin-options.json
+++ b/src/plugin-options.json
@@ -22,6 +22,10 @@
}
]
},
+ "experimentalUseImportModule": {
+ "description": "Enable the experimental importModule approach instead of using child compilers. This uses less memory and is faster.",
+ "type": "boolean"
+ },
"ignoreOrder": {
"type": "boolean"
},
diff --git a/test/TestCases.test.js b/test/TestCases.test.js
index f1e5e57a..691f39da 100644
--- a/test/TestCases.test.js
+++ b/test/TestCases.test.js
@@ -7,6 +7,8 @@ import path from 'path';
import webpack from 'webpack';
+import Self from '../src/index';
+
function clearDirectory(dirPath) {
let files;
@@ -111,14 +113,26 @@ describe('TestCases', () => {
{
mode: 'none',
context: directoryForCase,
+ },
+ config,
+ {
output: Object.assign(
{
path: outputDirectoryForCase,
},
config.output
),
- },
- config
+ plugins:
+ config.plugins &&
+ config.plugins.map((p) => {
+ if (p.constructor === Self) {
+ const { options } = p;
+ options.experimentalUseImportModule = !!process.env
+ .EXPERIMENTAL_USE_IMPORT_MODULE;
+ }
+ return p;
+ }),
+ }
);
}
@@ -175,7 +189,9 @@ describe('TestCases', () => {
const expectedDirectory = path.resolve(directoryForCase, 'expected');
const expectedDirectoryByVersion = path.join(
expectedDirectory,
- `webpack-${webpack.version[0]}`
+ `webpack-${webpack.version[0]}${
+ process.env.EXPERIMENTAL_USE_IMPORT_MODULE ? '-importModule' : ''
+ }`
);
if (/^hmr/.test(directory)) {
diff --git a/test/__snapshots__/validate-loader-options.test.js.snap.webpack4 b/test/__snapshots__/validate-loader-options.test.js.snap.webpack4
index a8a95996..208df811 100644
--- a/test/__snapshots__/validate-loader-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-loader-options.test.js.snap.webpack4
@@ -29,47 +29,47 @@ exports[`validate options should throw an error on the "publicPath" option with
exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
diff --git a/test/__snapshots__/validate-loader-options.test.js.snap.webpack5 b/test/__snapshots__/validate-loader-options.test.js.snap.webpack5
index a8a95996..208df811 100644
--- a/test/__snapshots__/validate-loader-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-loader-options.test.js.snap.webpack5
@@ -29,47 +29,47 @@ exports[`validate options should throw an error on the "publicPath" option with
exports[`validate options should throw an error on the "unknown" option with "/test/" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "[]" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{"foo":"bar"}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "{}" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "1" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "false" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "test" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
exports[`validate options should throw an error on the "unknown" option with "true" value 1`] = `
"Invalid options object. Mini CSS Extract Plugin Loader 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 { publicPath?, emit?, esModule?, modules? }"
+ object { publicPath?, emit?, esModule?, layer?, modules? }"
`;
diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap.webpack4 b/test/__snapshots__/validate-plugin-options.test.js.snap.webpack4
index 8d9e1b45..7da02d24 100644
--- a/test/__snapshots__/validate-plugin-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-plugin-options.test.js.snap.webpack4
@@ -99,47 +99,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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
diff --git a/test/__snapshots__/validate-plugin-options.test.js.snap.webpack5 b/test/__snapshots__/validate-plugin-options.test.js.snap.webpack5
index 8d9e1b45..7da02d24 100644
--- a/test/__snapshots__/validate-plugin-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-plugin-options.test.js.snap.webpack5
@@ -99,47 +99,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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
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?, ignoreOrder?, insert?, attributes?, linkType? }"
+ object { filename?, chunkFilename?, experimentalUseImportModule?, ignoreOrder?, insert?, attributes?, linkType? }"
`;
diff --git a/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-815babffe97b00a1f30b.woff2 b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-815babffe97b00a1f30b.woff2
new file mode 100644
index 00000000..ddca5526
--- /dev/null
+++ b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-815babffe97b00a1f30b.woff2
@@ -0,0 +1 @@
+auxiliaryAssets-815babffe97b00a1f30b.woff2
\ No newline at end of file
diff --git a/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-a0de923c946d4ccb38b0.ttf b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-a0de923c946d4ccb38b0.ttf
new file mode 100644
index 00000000..16502c45
--- /dev/null
+++ b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-a0de923c946d4ccb38b0.ttf
@@ -0,0 +1 @@
+auxiliaryAssets-a0de923c946d4ccb38b0.ttf
\ No newline at end of file
diff --git a/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-d4c409dfe110747b1763.woff b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-d4c409dfe110747b1763.woff
new file mode 100644
index 00000000..deeb500c
--- /dev/null
+++ b/test/cases/auxiliaryAssets/expected/webpack-5-importModule/auxiliaryAssets-d4c409dfe110747b1763.woff
@@ -0,0 +1 @@
+auxiliaryAssets-d4c409dfe110747b1763.woff
\ No newline at end of file
diff --git a/test/cases/auxiliaryAssets/test.filter.js b/test/cases/auxiliaryAssets/test.filter.js
index 042a0256..20341d78 100644
--- a/test/cases/auxiliaryAssets/test.filter.js
+++ b/test/cases/auxiliaryAssets/test.filter.js
@@ -1,3 +1,4 @@
const webpack = require('webpack');
-module.exports = () => webpack.version[0] !== '4';
+module.exports = () =>
+ webpack.version[0] !== '4' && !process.env.EXPERIMENTAL_USE_IMPORT_MODULE;
diff --git a/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/0.async.css b/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/0.async.css
new file mode 100644
index 00000000..e665100a
--- /dev/null
+++ b/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/0.async.css
@@ -0,0 +1,4 @@
+.async {
+ color: red;
+}
+
diff --git a/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/main.css b/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/chunkFilename-as-function/expected/webpack-5-importModule/main.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.bb36c53eabba881e0081.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.bb36c53eabba881e0081.css
new file mode 100644
index 00000000..e665100a
--- /dev/null
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/0.bb36c53eabba881e0081.css
@@ -0,0 +1,4 @@
+.async {
+ color: red;
+}
+
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/async.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/async.js
new file mode 100644
index 00000000..15bac459
--- /dev/null
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/async.js
@@ -0,0 +1,13 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[0],{
+
+/***/ 2:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+}]);
\ No newline at end of file
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/bb36c53eabba881e0081.css b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/bb36c53eabba881e0081.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/bb36c53eabba881e0081.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..fd023ff4
--- /dev/null
+++ b/test/cases/chunkFilename-fullhash/expected/webpack-5-importModule/main.js
@@ -0,0 +1,347 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/ensure chunk */
+/******/ (() => {
+/******/ __webpack_require__.f = {};
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = (chunkId) => {
+/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ __webpack_require__.f[key](chunkId, promises);
+/******/ return promises;
+/******/ }, []));
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference async chunks
+/******/ __webpack_require__.u = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + "async" + ".js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + "." + __webpack_require__.h() + ".css";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ __webpack_require__.h = () => ("bb36c53eabba881e0081")
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/css loading */
+/******/ (() => {
+/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ var linkTag = document.createElement("link");
+/******/
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ var onLinkComplete = (event) => {
+/******/ // avoid mem leaks.
+/******/ linkTag.onerror = linkTag.onload = null;
+/******/ if (event.type === 'load') {
+/******/ resolve();
+/******/ } else {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realHref = event && event.target && event.target.href || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.type = errorType;
+/******/ err.request = realHref;
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ }
+/******/ }
+/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ linkTag.href = fullhref;
+/******/
+/******/ document.head.appendChild(linkTag);
+/******/ return linkTag;
+/******/ };
+/******/ var findStylesheet = (href, fullhref) => {
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return tag;
+/******/ }
+/******/ };
+/******/ var loadStylesheet = (chunkId) => {
+/******/ return new Promise((resolve, reject) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ if(findStylesheet(href, fullhref)) return resolve();
+/******/ createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ });
+/******/ }
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 1: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ var cssChunks = {"0":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }, (e) => {
+/******/ delete installedCssChunks[chunkId];
+/******/ throw e;
+/******/ }));
+/******/ }
+/******/ };
+/******/
+/******/ // no hmr
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 1: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.j = (chunkId, promises) => {
+/******/ // JSONP chunk loading for javascript
+/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ if(true) { // all chunks have JS
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ if(installedChunkData) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ installedChunkData[1](error);
+/******/ }
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ } else installedChunks[chunkId] = 0;
+/******/ }
+/******/ }
+/******/ };
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ // no on chunks loaded
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+/* eslint-disable-next-line no-unused-expressions */
+__webpack_require__.e(/* import() | async */ 0).then(__webpack_require__.bind(__webpack_require__, 2));
+
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/chunkFilename/expected/webpack-5-importModule/0.async.css b/test/cases/chunkFilename/expected/webpack-5-importModule/0.async.css
new file mode 100644
index 00000000..e665100a
--- /dev/null
+++ b/test/cases/chunkFilename/expected/webpack-5-importModule/0.async.css
@@ -0,0 +1,4 @@
+.async {
+ color: red;
+}
+
diff --git a/test/cases/chunkFilename/expected/webpack-5-importModule/main.css b/test/cases/chunkFilename/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/chunkFilename/expected/webpack-5-importModule/main.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/15a667c7583f9b9ec41d.css b/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/15a667c7583f9b9ec41d.css
new file mode 100644
index 00000000..c6856116
--- /dev/null
+++ b/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/15a667c7583f9b9ec41d.css
@@ -0,0 +1,8 @@
+.styleA {
+ background: red;
+}
+
+.styleB {
+ background: blue;
+}
+
diff --git a/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/ffa19619c12a79d133f4.css b/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/ffa19619c12a79d133f4.css
new file mode 100644
index 00000000..95d70a8e
--- /dev/null
+++ b/test/cases/contenthash-multiple-entries/expected/webpack-5-importModule/ffa19619c12a79d133f4.css
@@ -0,0 +1,4 @@
+.styleA {
+ background: red;
+}
+
diff --git a/test/cases/contenthash/expected/webpack-5-importModule/1.main.a7263f8f763dcf4051bc.css b/test/cases/contenthash/expected/webpack-5-importModule/1.main.a7263f8f763dcf4051bc.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/contenthash/expected/webpack-5-importModule/1.main.a7263f8f763dcf4051bc.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/contenthash/expected/webpack-5-importModule/2.main.a85c9b6a9dce223262b9.css b/test/cases/contenthash/expected/webpack-5-importModule/2.main.a85c9b6a9dce223262b9.css
new file mode 100644
index 00000000..ec3b88b5
--- /dev/null
+++ b/test/cases/contenthash/expected/webpack-5-importModule/2.main.a85c9b6a9dce223262b9.css
@@ -0,0 +1,4 @@
+body {
+ background: green;
+}
+
diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.css b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.css
new file mode 100644
index 00000000..7b8c3886
--- /dev/null
+++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.css
@@ -0,0 +1,8 @@
+.styleC {
+ background: red;
+}
+
+.styleD {
+ background: blue;
+}
+
diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.js b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.js
new file mode 100644
index 00000000..b6d76b78
--- /dev/null
+++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/common.js
@@ -0,0 +1,171 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+/* 2 */,
+/* 3 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ var deferred = [];
+/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ if(chunkIds) {
+/******/ priority = priority || 0;
+/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ deferred[i] = [chunkIds, fn, priority];
+/******/ return;
+/******/ }
+/******/ var notFulfilled = Infinity;
+/******/ for (var i = 0; i < deferred.length; i++) {
+/******/ var [chunkIds, fn, priority] = deferred[i];
+/******/ var fulfilled = true;
+/******/ for (var j = 0; j < chunkIds.length; j++) {
+/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ chunkIds.splice(j--, 1);
+/******/ } else {
+/******/ fulfilled = false;
+/******/ if(priority < notFulfilled) notFulfilled = priority;
+/******/ }
+/******/ }
+/******/ if(fulfilled) {
+/******/ deferred.splice(i--, 1)
+/******/ result = fn();
+/******/ }
+/******/ }
+/******/ return result;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // no chunk on demand loading
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/ __webpack_require__.O();
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
+(() => {
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleC_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+})();
+
+// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleD_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+
+
+})();
+
+__webpack_require__.O();
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.css b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.css
new file mode 100644
index 00000000..bd9b41d3
--- /dev/null
+++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.css
@@ -0,0 +1,8 @@
+.styleB {
+ background: blue;
+}
+
+.styleA {
+ background: red;
+}
+
diff --git a/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.js b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.js
new file mode 100644
index 00000000..d31bf3c4
--- /dev/null
+++ b/test/cases/dependOn-multiple-files-per-entry/expected/webpack-5-importModule/entry1.js
@@ -0,0 +1,51 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
+/* 0 */,
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
+
+
+
+/***/ }),
+/* 5 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+/* 6 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
+
+
+
+/***/ }),
+/* 7 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+],
+/******/ __webpack_require__ => { // webpackRuntimeModules
+/******/ "use strict";
+/******/
+/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+/******/ var __webpack_exports__ = (__webpack_exec__(6), __webpack_exec__(4));
+/******/ }
+]);
\ No newline at end of file
diff --git a/test/cases/dependOn/expected/webpack-5-importModule/common.css b/test/cases/dependOn/expected/webpack-5-importModule/common.css
new file mode 100644
index 00000000..bbb56596
--- /dev/null
+++ b/test/cases/dependOn/expected/webpack-5-importModule/common.css
@@ -0,0 +1,4 @@
+.styleB {
+ background: blue;
+}
+
diff --git a/test/cases/dependOn/expected/webpack-5-importModule/common.js b/test/cases/dependOn/expected/webpack-5-importModule/common.js
new file mode 100644
index 00000000..d36ae66a
--- /dev/null
+++ b/test/cases/dependOn/expected/webpack-5-importModule/common.js
@@ -0,0 +1,153 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ var deferred = [];
+/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ if(chunkIds) {
+/******/ priority = priority || 0;
+/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ deferred[i] = [chunkIds, fn, priority];
+/******/ return;
+/******/ }
+/******/ var notFulfilled = Infinity;
+/******/ for (var i = 0; i < deferred.length; i++) {
+/******/ var [chunkIds, fn, priority] = deferred[i];
+/******/ var fulfilled = true;
+/******/ for (var j = 0; j < chunkIds.length; j++) {
+/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ chunkIds.splice(j--, 1);
+/******/ } else {
+/******/ fulfilled = false;
+/******/ if(priority < notFulfilled) notFulfilled = priority;
+/******/ }
+/******/ }
+/******/ if(fulfilled) {
+/******/ deferred.splice(i--, 1)
+/******/ result = fn();
+/******/ }
+/******/ }
+/******/ return result;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // no chunk on demand loading
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/ __webpack_require__.O();
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleB_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+})();
+
+__webpack_require__.O();
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/dependOn/expected/webpack-5-importModule/entry1.css b/test/cases/dependOn/expected/webpack-5-importModule/entry1.css
new file mode 100644
index 00000000..95d70a8e
--- /dev/null
+++ b/test/cases/dependOn/expected/webpack-5-importModule/entry1.css
@@ -0,0 +1,4 @@
+.styleA {
+ background: red;
+}
+
diff --git a/test/cases/dependOn/expected/webpack-5-importModule/entry1.js b/test/cases/dependOn/expected/webpack-5-importModule/entry1.js
new file mode 100644
index 00000000..b66131d3
--- /dev/null
+++ b/test/cases/dependOn/expected/webpack-5-importModule/entry1.js
@@ -0,0 +1,30 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
+/* 0 */,
+/* 1 */,
+/* 2 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _styleA_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+
+
+
+/***/ }),
+/* 3 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+],
+/******/ __webpack_require__ => { // webpackRuntimeModules
+/******/ "use strict";
+/******/
+/******/ var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
+/******/ var __webpack_exports__ = (__webpack_exec__(2));
+/******/ }
+]);
\ No newline at end of file
diff --git a/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css b/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..8f8cf968
--- /dev/null
+++ b/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css
@@ -0,0 +1,6 @@
+body {
+ background: red;
+}
+
+
+/*# sourceMappingURL=main.css.map*/
\ No newline at end of file
diff --git a/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css.map b/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css.map
new file mode 100644
index 00000000..bb767168
--- /dev/null
+++ b/test/cases/devtool-source-map-from-loaders/expected/webpack-5-importModule/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./style.css"],"names":[],"mappings":"AAAA;EACE,eAAe;AACjB","file":"main.css","sourcesContent":["body {\n background: red;\n}\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/test/cases/devtool-source-map-no-source-maps-from-loaders/expected/webpack-5-importModule/main.css b/test/cases/devtool-source-map-no-source-maps-from-loaders/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/devtool-source-map-no-source-maps-from-loaders/expected/webpack-5-importModule/main.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.css b/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..414d12e5
--- /dev/null
+++ b/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.css
@@ -0,0 +1,12 @@
+.foo__a {
+ background: red;
+}
+
+.foo__b {
+ background: green;
+}
+
+.foo__c {
+ background: blue;
+}
+
diff --git a/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.js b/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..4f1059be
--- /dev/null
+++ b/test/cases/es-module-concatenation-modules/expected/webpack-5-importModule/main.js
@@ -0,0 +1,93 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+ "a": () => (/* reexport */ a_namespaceObject),
+ "b": () => (/* reexport */ b_namespaceObject),
+ "c": () => (/* reexport */ c)
+});
+
+// NAMESPACE OBJECT: ./a.css
+var a_namespaceObject = {};
+__webpack_require__.r(a_namespaceObject);
+__webpack_require__.d(a_namespaceObject, {
+ "a": () => (a)
+});
+
+// NAMESPACE OBJECT: ./b.css
+var b_namespaceObject = {};
+__webpack_require__.r(b_namespaceObject);
+__webpack_require__.d(b_namespaceObject, {
+ "b": () => (b)
+});
+
+// NAMESPACE OBJECT: ./index.js
+var index_namespaceObject = {};
+__webpack_require__.r(index_namespaceObject);
+__webpack_require__.d(index_namespaceObject, {
+ "a": () => (a_namespaceObject),
+ "b": () => (b_namespaceObject),
+ "c": () => (c)
+});
+
+;// CONCATENATED MODULE: ./a.css
+// extracted by mini-css-extract-plugin
+const a = "foo__a";
+;// CONCATENATED MODULE: ./b.css
+// extracted by mini-css-extract-plugin
+const b = "foo__b";
+;// CONCATENATED MODULE: ./c.css
+// extracted by mini-css-extract-plugin
+const c = "foo__c";
+;// CONCATENATED MODULE: ./index.js
+/* eslint-disable import/no-namespace */
+
+
+
+
+
+
+
+
+// eslint-disable-next-line no-console
+console.log(index_namespaceObject);
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.css b/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..a5728976
--- /dev/null
+++ b/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.css
@@ -0,0 +1,12 @@
+.a {
+ background: red;
+}
+
+.b {
+ background: green;
+}
+
+.c {
+ background: blue;
+}
+
diff --git a/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.js b/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..394a6125
--- /dev/null
+++ b/test/cases/es-module-concatenation/expected/webpack-5-importModule/main.js
@@ -0,0 +1,38 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+;// CONCATENATED MODULE: ./a.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./b.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./c.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./index.js
+
+
+
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/es-named-export/expected/webpack-5-importModule/main.css b/test/cases/es-named-export/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..aa9b1569
--- /dev/null
+++ b/test/cases/es-named-export/expected/webpack-5-importModule/main.css
@@ -0,0 +1,12 @@
+.foo__style__a-class {
+ background: red;
+}
+
+.foo__style__b__class {
+ color: green;
+}
+
+.foo__style__cClass {
+ color: blue;
+}
+
diff --git a/test/cases/es-named-export/expected/webpack-5-importModule/main.js b/test/cases/es-named-export/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..5017ec83
--- /dev/null
+++ b/test/cases/es-named-export/expected/webpack-5-importModule/main.js
@@ -0,0 +1,89 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ([
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */ "aClass": () => (/* binding */ aClass),
+/* harmony export */ "bClass": () => (/* binding */ bClass),
+/* harmony export */ "cClass": () => (/* binding */ cClass)
+/* harmony export */ });
+// extracted by mini-css-extract-plugin
+const aClass = "foo__style__a-class";
+const bClass = "foo__style__b__class";
+const cClass = "foo__style__cClass";
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+
+
+// eslint-disable-next-line no-console
+console.log({ css: _style_css__WEBPACK_IMPORTED_MODULE_0__.default, aClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.aClass, bClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.bClass, cClass: _style_css__WEBPACK_IMPORTED_MODULE_0__.cClass });
+
+})();
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/filename-without-template/expected/webpack-5-importModule/0.main.css b/test/cases/filename-without-template/expected/webpack-5-importModule/0.main.css
new file mode 100644
index 00000000..e665100a
--- /dev/null
+++ b/test/cases/filename-without-template/expected/webpack-5-importModule/0.main.css
@@ -0,0 +1,4 @@
+.async {
+ color: red;
+}
+
diff --git a/test/cases/filename-without-template/expected/webpack-5-importModule/main.css b/test/cases/filename-without-template/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/filename-without-template/expected/webpack-5-importModule/main.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/hmr/expected/webpack-5-importModule/main.css b/test/cases/hmr/expected/webpack-5-importModule/main.css
new file mode 100644
index 00000000..6f77cc07
--- /dev/null
+++ b/test/cases/hmr/expected/webpack-5-importModule/main.css
@@ -0,0 +1,24 @@
+@import url(https://some/other/external/css);
+@import url(https://some/external/css);
+body {
+ background: red;
+}
+
+.c {
+ background: red;
+}
+
+.c {
+ color: yellow;
+}
+
+.b {
+ background: red;
+}
+
+.b {
+ color: yellow;
+}
+
+
+
diff --git a/test/cases/hmr/expected/webpack-5-importModule/main.js b/test/cases/hmr/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..1642f5af
--- /dev/null
+++ b/test/cases/hmr/expected/webpack-5-importModule/main.js
@@ -0,0 +1,1454 @@
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ([
+/* 0 */
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+ if(true) {
+ //
+ var cssReload = __webpack_require__(1)(module.id, {"locals":false});
+ module.hot.dispose(cssReload);
+ module.hot.accept(undefined, cssReload);
+ }
+
+
+/***/ }),
+/* 1 */
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+/* eslint-env browser */
+/*
+ eslint-disable
+ no-console,
+ func-names
+*/
+
+const normalizeUrl = __webpack_require__(2);
+
+const srcByModuleId = Object.create(null);
+
+const noDocument = typeof document === 'undefined';
+
+const { forEach } = Array.prototype;
+
+function debounce(fn, time) {
+ let timeout = 0;
+
+ return function () {
+ const self = this;
+ // eslint-disable-next-line prefer-rest-params
+ const args = arguments;
+
+ const functionCall = function functionCall() {
+ return fn.apply(self, args);
+ };
+
+ clearTimeout(timeout);
+ timeout = setTimeout(functionCall, time);
+ };
+}
+
+function noop() {}
+
+function getCurrentScriptUrl(moduleId) {
+ let src = srcByModuleId[moduleId];
+
+ if (!src) {
+ if (document.currentScript) {
+ ({ src } = document.currentScript);
+ } else {
+ const scripts = document.getElementsByTagName('script');
+ const lastScriptTag = scripts[scripts.length - 1];
+
+ if (lastScriptTag) {
+ ({ src } = lastScriptTag);
+ }
+ }
+
+ srcByModuleId[moduleId] = src;
+ }
+
+ return function (fileMap) {
+ if (!src) {
+ return null;
+ }
+
+ const splitResult = src.split(/([^\\/]+)\.js$/);
+ const filename = splitResult && splitResult[1];
+
+ if (!filename) {
+ return [src.replace('.js', '.css')];
+ }
+
+ if (!fileMap) {
+ return [src.replace('.js', '.css')];
+ }
+
+ return fileMap.split(',').map((mapRule) => {
+ const reg = new RegExp(`${filename}\\.js$`, 'g');
+
+ return normalizeUrl(
+ src.replace(reg, `${mapRule.replace(/{fileName}/g, filename)}.css`)
+ );
+ });
+ };
+}
+
+function updateCss(el, url) {
+ if (!url) {
+ if (!el.href) {
+ return;
+ }
+
+ // eslint-disable-next-line
+ url = el.href.split('?')[0];
+ }
+
+ if (!isUrlRequest(url)) {
+ return;
+ }
+
+ if (el.isLoaded === false) {
+ // We seem to be about to replace a css link that hasn't loaded yet.
+ // We're probably changing the same file more than once.
+ return;
+ }
+
+ if (!url || !(url.indexOf('.css') > -1)) {
+ return;
+ }
+
+ // eslint-disable-next-line no-param-reassign
+ el.visited = true;
+
+ const newEl = el.cloneNode();
+
+ newEl.isLoaded = false;
+
+ newEl.addEventListener('load', () => {
+ if (newEl.isLoaded) {
+ return;
+ }
+
+ newEl.isLoaded = true;
+ el.parentNode.removeChild(el);
+ });
+
+ newEl.addEventListener('error', () => {
+ if (newEl.isLoaded) {
+ return;
+ }
+
+ newEl.isLoaded = true;
+ el.parentNode.removeChild(el);
+ });
+
+ newEl.href = `${url}?${Date.now()}`;
+
+ if (el.nextSibling) {
+ el.parentNode.insertBefore(newEl, el.nextSibling);
+ } else {
+ el.parentNode.appendChild(newEl);
+ }
+}
+
+function getReloadUrl(href, src) {
+ let ret;
+
+ // eslint-disable-next-line no-param-reassign
+ href = normalizeUrl(href, { stripWWW: false });
+
+ // eslint-disable-next-line array-callback-return
+ src.some((url) => {
+ if (href.indexOf(src) > -1) {
+ ret = url;
+ }
+ });
+
+ return ret;
+}
+
+function reloadStyle(src) {
+ if (!src) {
+ return false;
+ }
+
+ const elements = document.querySelectorAll('link');
+ let loaded = false;
+
+ forEach.call(elements, (el) => {
+ if (!el.href) {
+ return;
+ }
+
+ const url = getReloadUrl(el.href, src);
+
+ if (!isUrlRequest(url)) {
+ return;
+ }
+
+ if (el.visited === true) {
+ return;
+ }
+
+ if (url) {
+ updateCss(el, url);
+
+ loaded = true;
+ }
+ });
+
+ return loaded;
+}
+
+function reloadAll() {
+ const elements = document.querySelectorAll('link');
+
+ forEach.call(elements, (el) => {
+ if (el.visited === true) {
+ return;
+ }
+
+ updateCss(el);
+ });
+}
+
+function isUrlRequest(url) {
+ // An URL is not an request if
+
+ // It is not http or https
+ if (!/^https?:/i.test(url)) {
+ return false;
+ }
+
+ return true;
+}
+
+module.exports = function (moduleId, options) {
+ if (noDocument) {
+ console.log('no window.document found, will not HMR CSS');
+
+ return noop;
+ }
+
+ const getScriptSrc = getCurrentScriptUrl(moduleId);
+
+ function update() {
+ const src = getScriptSrc(options.filename);
+ const reloaded = reloadStyle(src);
+
+ if (options.locals) {
+ console.log('[HMR] Detected local css modules. Reload all css');
+
+ reloadAll();
+
+ return;
+ }
+
+ if (reloaded) {
+ console.log('[HMR] css reload %s', src.join(' '));
+ } else {
+ console.log('[HMR] Reload all css');
+
+ reloadAll();
+ }
+ }
+
+ return debounce(update, 50);
+};
+
+
+/***/ }),
+/* 2 */
+/***/ ((module) => {
+
+/* eslint-disable */
+
+function normalizeUrl(pathComponents) {
+ return pathComponents
+ .reduce(function (accumulator, item) {
+ switch (item) {
+ case '..':
+ accumulator.pop();
+ break;
+ case '.':
+ break;
+ default:
+ accumulator.push(item);
+ }
+
+ return accumulator;
+ }, [])
+ .join('/');
+}
+
+module.exports = function (urlString) {
+ urlString = urlString.trim();
+
+ if (/^data:/i.test(urlString)) {
+ return urlString;
+ }
+
+ var protocol =
+ urlString.indexOf('//') !== -1 ? urlString.split('//')[0] + '//' : '';
+ var components = urlString.replace(new RegExp(protocol, 'i'), '').split('/');
+ var host = components[0].toLowerCase().replace(/\.$/, '');
+
+ components[0] = '';
+
+ var path = normalizeUrl(components);
+
+ return protocol + host + path;
+};
+
+
+/***/ })
+/******/ ]);
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ if (cachedModule.error !== undefined) throw cachedModule.error;
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ id: moduleId,
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ try {
+/******/ var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
+/******/ __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
+/******/ module = execOptions.module;
+/******/ execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
+/******/ } catch(e) {
+/******/ module.error = e;
+/******/ throw e;
+/******/ }
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/******/ // expose the module cache
+/******/ __webpack_require__.c = __webpack_module_cache__;
+/******/
+/******/ // expose the module execution interceptor
+/******/ __webpack_require__.i = [];
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/get javascript update chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.hu = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + "." + __webpack_require__.h() + ".hot-update.js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return undefined;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get update manifest filename */
+/******/ (() => {
+/******/ __webpack_require__.hmrF = () => ("main." + __webpack_require__.h() + ".hot-update.json");
+/******/ })();
+/******/
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ __webpack_require__.h = () => ("xxxxxxxxxxxxxxxxxxxxxx")
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hot module replacement */
+/******/ (() => {
+/******/ var currentModuleData = {};
+/******/ var installedModules = __webpack_require__.c;
+/******/
+/******/ // module and require creation
+/******/ var currentChildModule;
+/******/ var currentParents = [];
+/******/
+/******/ // status
+/******/ var registeredStatusHandlers = [];
+/******/ var currentStatus = "idle";
+/******/
+/******/ // while downloading
+/******/ var blockingPromises;
+/******/
+/******/ // The update info
+/******/ var currentUpdateApplyHandlers;
+/******/ var queuedInvalidatedModules;
+/******/
+/******/ // eslint-disable-next-line no-unused-vars
+/******/ __webpack_require__.hmrD = currentModuleData;
+/******/
+/******/ __webpack_require__.i.push(function (options) {
+/******/ var module = options.module;
+/******/ var require = createRequire(options.require, options.id);
+/******/ module.hot = createModuleHotObject(options.id, module);
+/******/ module.parents = currentParents;
+/******/ module.children = [];
+/******/ currentParents = [];
+/******/ options.require = require;
+/******/ });
+/******/
+/******/ __webpack_require__.hmrC = {};
+/******/ __webpack_require__.hmrI = {};
+/******/
+/******/ function createRequire(require, moduleId) {
+/******/ var me = installedModules[moduleId];
+/******/ if (!me) return require;
+/******/ var fn = function (request) {
+/******/ if (me.hot.active) {
+/******/ if (installedModules[request]) {
+/******/ var parents = installedModules[request].parents;
+/******/ if (parents.indexOf(moduleId) === -1) {
+/******/ parents.push(moduleId);
+/******/ }
+/******/ } else {
+/******/ currentParents = [moduleId];
+/******/ currentChildModule = request;
+/******/ }
+/******/ if (me.children.indexOf(request) === -1) {
+/******/ me.children.push(request);
+/******/ }
+/******/ } else {
+/******/ console.warn(
+/******/ "[HMR] unexpected require(" +
+/******/ request +
+/******/ ") from disposed module " +
+/******/ moduleId
+/******/ );
+/******/ currentParents = [];
+/******/ }
+/******/ return require(request);
+/******/ };
+/******/ var createPropertyDescriptor = function (name) {
+/******/ return {
+/******/ configurable: true,
+/******/ enumerable: true,
+/******/ get: function () {
+/******/ return require[name];
+/******/ },
+/******/ set: function (value) {
+/******/ require[name] = value;
+/******/ }
+/******/ };
+/******/ };
+/******/ for (var name in require) {
+/******/ if (Object.prototype.hasOwnProperty.call(require, name) && name !== "e") {
+/******/ Object.defineProperty(fn, name, createPropertyDescriptor(name));
+/******/ }
+/******/ }
+/******/ fn.e = function (chunkId) {
+/******/ return trackBlockingPromise(require.e(chunkId));
+/******/ };
+/******/ return fn;
+/******/ }
+/******/
+/******/ function createModuleHotObject(moduleId, me) {
+/******/ var _main = currentChildModule !== moduleId;
+/******/ var hot = {
+/******/ // private stuff
+/******/ _acceptedDependencies: {},
+/******/ _acceptedErrorHandlers: {},
+/******/ _declinedDependencies: {},
+/******/ _selfAccepted: false,
+/******/ _selfDeclined: false,
+/******/ _selfInvalidated: false,
+/******/ _disposeHandlers: [],
+/******/ _main: _main,
+/******/ _requireSelf: function () {
+/******/ currentParents = me.parents.slice();
+/******/ currentChildModule = _main ? undefined : moduleId;
+/******/ __webpack_require__(moduleId);
+/******/ },
+/******/
+/******/ // Module API
+/******/ active: true,
+/******/ accept: function (dep, callback, errorHandler) {
+/******/ if (dep === undefined) hot._selfAccepted = true;
+/******/ else if (typeof dep === "function") hot._selfAccepted = dep;
+/******/ else if (typeof dep === "object" && dep !== null) {
+/******/ for (var i = 0; i < dep.length; i++) {
+/******/ hot._acceptedDependencies[dep[i]] = callback || function () {};
+/******/ hot._acceptedErrorHandlers[dep[i]] = errorHandler;
+/******/ }
+/******/ } else {
+/******/ hot._acceptedDependencies[dep] = callback || function () {};
+/******/ hot._acceptedErrorHandlers[dep] = errorHandler;
+/******/ }
+/******/ },
+/******/ decline: function (dep) {
+/******/ if (dep === undefined) hot._selfDeclined = true;
+/******/ else if (typeof dep === "object" && dep !== null)
+/******/ for (var i = 0; i < dep.length; i++)
+/******/ hot._declinedDependencies[dep[i]] = true;
+/******/ else hot._declinedDependencies[dep] = true;
+/******/ },
+/******/ dispose: function (callback) {
+/******/ hot._disposeHandlers.push(callback);
+/******/ },
+/******/ addDisposeHandler: function (callback) {
+/******/ hot._disposeHandlers.push(callback);
+/******/ },
+/******/ removeDisposeHandler: function (callback) {
+/******/ var idx = hot._disposeHandlers.indexOf(callback);
+/******/ if (idx >= 0) hot._disposeHandlers.splice(idx, 1);
+/******/ },
+/******/ invalidate: function () {
+/******/ this._selfInvalidated = true;
+/******/ switch (currentStatus) {
+/******/ case "idle":
+/******/ currentUpdateApplyHandlers = [];
+/******/ Object.keys(__webpack_require__.hmrI).forEach(function (key) {
+/******/ __webpack_require__.hmrI[key](
+/******/ moduleId,
+/******/ currentUpdateApplyHandlers
+/******/ );
+/******/ });
+/******/ setStatus("ready");
+/******/ break;
+/******/ case "ready":
+/******/ Object.keys(__webpack_require__.hmrI).forEach(function (key) {
+/******/ __webpack_require__.hmrI[key](
+/******/ moduleId,
+/******/ currentUpdateApplyHandlers
+/******/ );
+/******/ });
+/******/ break;
+/******/ case "prepare":
+/******/ case "check":
+/******/ case "dispose":
+/******/ case "apply":
+/******/ (queuedInvalidatedModules = queuedInvalidatedModules || []).push(
+/******/ moduleId
+/******/ );
+/******/ break;
+/******/ default:
+/******/ // ignore requests in error states
+/******/ break;
+/******/ }
+/******/ },
+/******/
+/******/ // Management API
+/******/ check: hotCheck,
+/******/ apply: hotApply,
+/******/ status: function (l) {
+/******/ if (!l) return currentStatus;
+/******/ registeredStatusHandlers.push(l);
+/******/ },
+/******/ addStatusHandler: function (l) {
+/******/ registeredStatusHandlers.push(l);
+/******/ },
+/******/ removeStatusHandler: function (l) {
+/******/ var idx = registeredStatusHandlers.indexOf(l);
+/******/ if (idx >= 0) registeredStatusHandlers.splice(idx, 1);
+/******/ },
+/******/
+/******/ //inherit from previous dispose call
+/******/ data: currentModuleData[moduleId]
+/******/ };
+/******/ currentChildModule = undefined;
+/******/ return hot;
+/******/ }
+/******/
+/******/ function setStatus(newStatus) {
+/******/ currentStatus = newStatus;
+/******/ for (var i = 0; i < registeredStatusHandlers.length; i++)
+/******/ registeredStatusHandlers[i].call(null, newStatus);
+/******/ }
+/******/
+/******/ function trackBlockingPromise(promise) {
+/******/ switch (currentStatus) {
+/******/ case "ready":
+/******/ setStatus("prepare");
+/******/ blockingPromises.push(promise);
+/******/ waitForBlockingPromises(function () {
+/******/ setStatus("ready");
+/******/ });
+/******/ return promise;
+/******/ case "prepare":
+/******/ blockingPromises.push(promise);
+/******/ return promise;
+/******/ default:
+/******/ return promise;
+/******/ }
+/******/ }
+/******/
+/******/ function waitForBlockingPromises(fn) {
+/******/ if (blockingPromises.length === 0) return fn();
+/******/ var blocker = blockingPromises;
+/******/ blockingPromises = [];
+/******/ return Promise.all(blocker).then(function () {
+/******/ return waitForBlockingPromises(fn);
+/******/ });
+/******/ }
+/******/
+/******/ function hotCheck(applyOnUpdate) {
+/******/ if (currentStatus !== "idle") {
+/******/ throw new Error("check() is only allowed in idle status");
+/******/ }
+/******/ setStatus("check");
+/******/ return __webpack_require__.hmrM().then(function (update) {
+/******/ if (!update) {
+/******/ setStatus(applyInvalidatedModules() ? "ready" : "idle");
+/******/ return null;
+/******/ }
+/******/
+/******/ setStatus("prepare");
+/******/
+/******/ var updatedModules = [];
+/******/ blockingPromises = [];
+/******/ currentUpdateApplyHandlers = [];
+/******/
+/******/ return Promise.all(
+/******/ Object.keys(__webpack_require__.hmrC).reduce(function (
+/******/ promises,
+/******/ key
+/******/ ) {
+/******/ __webpack_require__.hmrC[key](
+/******/ update.c,
+/******/ update.r,
+/******/ update.m,
+/******/ promises,
+/******/ currentUpdateApplyHandlers,
+/******/ updatedModules
+/******/ );
+/******/ return promises;
+/******/ },
+/******/ [])
+/******/ ).then(function () {
+/******/ return waitForBlockingPromises(function () {
+/******/ if (applyOnUpdate) {
+/******/ return internalApply(applyOnUpdate);
+/******/ } else {
+/******/ setStatus("ready");
+/******/
+/******/ return updatedModules;
+/******/ }
+/******/ });
+/******/ });
+/******/ });
+/******/ }
+/******/
+/******/ function hotApply(options) {
+/******/ if (currentStatus !== "ready") {
+/******/ return Promise.resolve().then(function () {
+/******/ throw new Error("apply() is only allowed in ready status");
+/******/ });
+/******/ }
+/******/ return internalApply(options);
+/******/ }
+/******/
+/******/ function internalApply(options) {
+/******/ options = options || {};
+/******/
+/******/ applyInvalidatedModules();
+/******/
+/******/ var results = currentUpdateApplyHandlers.map(function (handler) {
+/******/ return handler(options);
+/******/ });
+/******/ currentUpdateApplyHandlers = undefined;
+/******/
+/******/ var errors = results
+/******/ .map(function (r) {
+/******/ return r.error;
+/******/ })
+/******/ .filter(Boolean);
+/******/
+/******/ if (errors.length > 0) {
+/******/ setStatus("abort");
+/******/ return Promise.resolve().then(function () {
+/******/ throw errors[0];
+/******/ });
+/******/ }
+/******/
+/******/ // Now in "dispose" phase
+/******/ setStatus("dispose");
+/******/
+/******/ results.forEach(function (result) {
+/******/ if (result.dispose) result.dispose();
+/******/ });
+/******/
+/******/ // Now in "apply" phase
+/******/ setStatus("apply");
+/******/
+/******/ var error;
+/******/ var reportError = function (err) {
+/******/ if (!error) error = err;
+/******/ };
+/******/
+/******/ var outdatedModules = [];
+/******/ results.forEach(function (result) {
+/******/ if (result.apply) {
+/******/ var modules = result.apply(reportError);
+/******/ if (modules) {
+/******/ for (var i = 0; i < modules.length; i++) {
+/******/ outdatedModules.push(modules[i]);
+/******/ }
+/******/ }
+/******/ }
+/******/ });
+/******/
+/******/ // handle errors in accept handlers and self accepted module load
+/******/ if (error) {
+/******/ setStatus("fail");
+/******/ return Promise.resolve().then(function () {
+/******/ throw error;
+/******/ });
+/******/ }
+/******/
+/******/ if (queuedInvalidatedModules) {
+/******/ return internalApply(options).then(function (list) {
+/******/ outdatedModules.forEach(function (moduleId) {
+/******/ if (list.indexOf(moduleId) < 0) list.push(moduleId);
+/******/ });
+/******/ return list;
+/******/ });
+/******/ }
+/******/
+/******/ setStatus("idle");
+/******/ return Promise.resolve(outdatedModules);
+/******/ }
+/******/
+/******/ function applyInvalidatedModules() {
+/******/ if (queuedInvalidatedModules) {
+/******/ if (!currentUpdateApplyHandlers) currentUpdateApplyHandlers = [];
+/******/ Object.keys(__webpack_require__.hmrI).forEach(function (key) {
+/******/ queuedInvalidatedModules.forEach(function (moduleId) {
+/******/ __webpack_require__.hmrI[key](
+/******/ moduleId,
+/******/ currentUpdateApplyHandlers
+/******/ );
+/******/ });
+/******/ });
+/******/ queuedInvalidatedModules = undefined;
+/******/ return true;
+/******/ }
+/******/ }
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/css loading */
+/******/ (() => {
+/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ var linkTag = document.createElement("link");
+/******/
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ var onLinkComplete = (event) => {
+/******/ // avoid mem leaks.
+/******/ linkTag.onerror = linkTag.onload = null;
+/******/ if (event.type === 'load') {
+/******/ resolve();
+/******/ } else {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realHref = event && event.target && event.target.href || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.type = errorType;
+/******/ err.request = realHref;
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ }
+/******/ }
+/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ linkTag.href = fullhref;
+/******/
+/******/ document.head.appendChild(linkTag);
+/******/ return linkTag;
+/******/ };
+/******/ var findStylesheet = (href, fullhref) => {
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return tag;
+/******/ }
+/******/ };
+/******/ var loadStylesheet = (chunkId) => {
+/******/ return new Promise((resolve, reject) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ if(findStylesheet(href, fullhref)) return resolve();
+/******/ createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ });
+/******/ }
+/******/ // no chunk loading
+/******/
+/******/ var oldTags = [];
+/******/ var newTags = [];
+/******/ var applyHandler = (options) => {
+/******/ return { dispose: () => {
+/******/ for(var i = 0; i < oldTags.length; i++) {
+/******/ var oldTag = oldTags[i];
+/******/ if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);
+/******/ }
+/******/ oldTags.length = 0;
+/******/ }, apply: () => {
+/******/ for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";
+/******/ newTags.length = 0;
+/******/ } };
+/******/ }
+/******/ __webpack_require__.hmrC.miniCss = (chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList) => {
+/******/ applyHandlers.push(applyHandler);
+/******/ chunkIds.forEach((chunkId) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ var oldTag = findStylesheet(href, fullhref);
+/******/ if(!oldTag) return;
+/******/ promises.push(new Promise((resolve, reject) => {
+/******/ var tag = createStylesheet(chunkId, fullhref, () => {
+/******/ tag.as = "style";
+/******/ tag.rel = "preload";
+/******/ resolve();
+/******/ }, reject);
+/******/ oldTags.push(oldTag);
+/******/ newTags.push(tag);
+/******/ }));
+/******/ });
+/******/ }
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ // no chunk on demand loading
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ var currentUpdatedModulesList;
+/******/ var waitingUpdateResolves = {};
+/******/ function loadUpdateChunk(chunkId) {
+/******/ return new Promise((resolve, reject) => {
+/******/ waitingUpdateResolves[chunkId] = resolve;
+/******/ // start update chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.hu(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(waitingUpdateResolves[chunkId]) {
+/******/ waitingUpdateResolves[chunkId] = undefined
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading hot update chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ reject(error);
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded);
+/******/ });
+/******/ }
+/******/
+/******/ self["webpackHotUpdate"] = (chunkId, moreModules, runtime) => {
+/******/ for(var moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ currentUpdate[moduleId] = moreModules[moduleId];
+/******/ if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
+/******/ }
+/******/ }
+/******/ if(runtime) currentUpdateRuntime.push(runtime);
+/******/ if(waitingUpdateResolves[chunkId]) {
+/******/ waitingUpdateResolves[chunkId]();
+/******/ waitingUpdateResolves[chunkId] = undefined;
+/******/ }
+/******/ };
+/******/
+/******/ var currentUpdateChunks;
+/******/ var currentUpdate;
+/******/ var currentUpdateRemovedChunks;
+/******/ var currentUpdateRuntime;
+/******/ function applyHandler(options) {
+/******/ if (__webpack_require__.f) delete __webpack_require__.f.jsonpHmr;
+/******/ currentUpdateChunks = undefined;
+/******/ function getAffectedModuleEffects(updateModuleId) {
+/******/ var outdatedModules = [updateModuleId];
+/******/ var outdatedDependencies = {};
+/******/
+/******/ var queue = outdatedModules.map(function (id) {
+/******/ return {
+/******/ chain: [id],
+/******/ id: id
+/******/ };
+/******/ });
+/******/ while (queue.length > 0) {
+/******/ var queueItem = queue.pop();
+/******/ var moduleId = queueItem.id;
+/******/ var chain = queueItem.chain;
+/******/ var module = __webpack_require__.c[moduleId];
+/******/ if (
+/******/ !module ||
+/******/ (module.hot._selfAccepted && !module.hot._selfInvalidated)
+/******/ )
+/******/ continue;
+/******/ if (module.hot._selfDeclined) {
+/******/ return {
+/******/ type: "self-declined",
+/******/ chain: chain,
+/******/ moduleId: moduleId
+/******/ };
+/******/ }
+/******/ if (module.hot._main) {
+/******/ return {
+/******/ type: "unaccepted",
+/******/ chain: chain,
+/******/ moduleId: moduleId
+/******/ };
+/******/ }
+/******/ for (var i = 0; i < module.parents.length; i++) {
+/******/ var parentId = module.parents[i];
+/******/ var parent = __webpack_require__.c[parentId];
+/******/ if (!parent) continue;
+/******/ if (parent.hot._declinedDependencies[moduleId]) {
+/******/ return {
+/******/ type: "declined",
+/******/ chain: chain.concat([parentId]),
+/******/ moduleId: moduleId,
+/******/ parentId: parentId
+/******/ };
+/******/ }
+/******/ if (outdatedModules.indexOf(parentId) !== -1) continue;
+/******/ if (parent.hot._acceptedDependencies[moduleId]) {
+/******/ if (!outdatedDependencies[parentId])
+/******/ outdatedDependencies[parentId] = [];
+/******/ addAllToSet(outdatedDependencies[parentId], [moduleId]);
+/******/ continue;
+/******/ }
+/******/ delete outdatedDependencies[parentId];
+/******/ outdatedModules.push(parentId);
+/******/ queue.push({
+/******/ chain: chain.concat([parentId]),
+/******/ id: parentId
+/******/ });
+/******/ }
+/******/ }
+/******/
+/******/ return {
+/******/ type: "accepted",
+/******/ moduleId: updateModuleId,
+/******/ outdatedModules: outdatedModules,
+/******/ outdatedDependencies: outdatedDependencies
+/******/ };
+/******/ }
+/******/
+/******/ function addAllToSet(a, b) {
+/******/ for (var i = 0; i < b.length; i++) {
+/******/ var item = b[i];
+/******/ if (a.indexOf(item) === -1) a.push(item);
+/******/ }
+/******/ }
+/******/
+/******/ // at begin all updates modules are outdated
+/******/ // the "outdated" status can propagate to parents if they don't accept the children
+/******/ var outdatedDependencies = {};
+/******/ var outdatedModules = [];
+/******/ var appliedUpdate = {};
+/******/
+/******/ var warnUnexpectedRequire = function warnUnexpectedRequire(module) {
+/******/ console.warn(
+/******/ "[HMR] unexpected require(" + module.id + ") to disposed module"
+/******/ );
+/******/ };
+/******/
+/******/ for (var moduleId in currentUpdate) {
+/******/ if (__webpack_require__.o(currentUpdate, moduleId)) {
+/******/ var newModuleFactory = currentUpdate[moduleId];
+/******/ /** @type {TODO} */
+/******/ var result;
+/******/ if (newModuleFactory) {
+/******/ result = getAffectedModuleEffects(moduleId);
+/******/ } else {
+/******/ result = {
+/******/ type: "disposed",
+/******/ moduleId: moduleId
+/******/ };
+/******/ }
+/******/ /** @type {Error|false} */
+/******/ var abortError = false;
+/******/ var doApply = false;
+/******/ var doDispose = false;
+/******/ var chainInfo = "";
+/******/ if (result.chain) {
+/******/ chainInfo = "\nUpdate propagation: " + result.chain.join(" -> ");
+/******/ }
+/******/ switch (result.type) {
+/******/ case "self-declined":
+/******/ if (options.onDeclined) options.onDeclined(result);
+/******/ if (!options.ignoreDeclined)
+/******/ abortError = new Error(
+/******/ "Aborted because of self decline: " +
+/******/ result.moduleId +
+/******/ chainInfo
+/******/ );
+/******/ break;
+/******/ case "declined":
+/******/ if (options.onDeclined) options.onDeclined(result);
+/******/ if (!options.ignoreDeclined)
+/******/ abortError = new Error(
+/******/ "Aborted because of declined dependency: " +
+/******/ result.moduleId +
+/******/ " in " +
+/******/ result.parentId +
+/******/ chainInfo
+/******/ );
+/******/ break;
+/******/ case "unaccepted":
+/******/ if (options.onUnaccepted) options.onUnaccepted(result);
+/******/ if (!options.ignoreUnaccepted)
+/******/ abortError = new Error(
+/******/ "Aborted because " + moduleId + " is not accepted" + chainInfo
+/******/ );
+/******/ break;
+/******/ case "accepted":
+/******/ if (options.onAccepted) options.onAccepted(result);
+/******/ doApply = true;
+/******/ break;
+/******/ case "disposed":
+/******/ if (options.onDisposed) options.onDisposed(result);
+/******/ doDispose = true;
+/******/ break;
+/******/ default:
+/******/ throw new Error("Unexception type " + result.type);
+/******/ }
+/******/ if (abortError) {
+/******/ return {
+/******/ error: abortError
+/******/ };
+/******/ }
+/******/ if (doApply) {
+/******/ appliedUpdate[moduleId] = newModuleFactory;
+/******/ addAllToSet(outdatedModules, result.outdatedModules);
+/******/ for (moduleId in result.outdatedDependencies) {
+/******/ if (__webpack_require__.o(result.outdatedDependencies, moduleId)) {
+/******/ if (!outdatedDependencies[moduleId])
+/******/ outdatedDependencies[moduleId] = [];
+/******/ addAllToSet(
+/******/ outdatedDependencies[moduleId],
+/******/ result.outdatedDependencies[moduleId]
+/******/ );
+/******/ }
+/******/ }
+/******/ }
+/******/ if (doDispose) {
+/******/ addAllToSet(outdatedModules, [result.moduleId]);
+/******/ appliedUpdate[moduleId] = warnUnexpectedRequire;
+/******/ }
+/******/ }
+/******/ }
+/******/ currentUpdate = undefined;
+/******/
+/******/ // Store self accepted outdated modules to require them later by the module system
+/******/ var outdatedSelfAcceptedModules = [];
+/******/ for (var j = 0; j < outdatedModules.length; j++) {
+/******/ var outdatedModuleId = outdatedModules[j];
+/******/ var module = __webpack_require__.c[outdatedModuleId];
+/******/ if (
+/******/ module &&
+/******/ (module.hot._selfAccepted || module.hot._main) &&
+/******/ // removed self-accepted modules should not be required
+/******/ appliedUpdate[outdatedModuleId] !== warnUnexpectedRequire &&
+/******/ // when called invalidate self-accepting is not possible
+/******/ !module.hot._selfInvalidated
+/******/ ) {
+/******/ outdatedSelfAcceptedModules.push({
+/******/ module: outdatedModuleId,
+/******/ require: module.hot._requireSelf,
+/******/ errorHandler: module.hot._selfAccepted
+/******/ });
+/******/ }
+/******/ }
+/******/
+/******/ var moduleOutdatedDependencies;
+/******/
+/******/ return {
+/******/ dispose: function () {
+/******/ currentUpdateRemovedChunks.forEach(function (chunkId) {
+/******/ delete installedChunks[chunkId];
+/******/ });
+/******/ currentUpdateRemovedChunks = undefined;
+/******/
+/******/ var idx;
+/******/ var queue = outdatedModules.slice();
+/******/ while (queue.length > 0) {
+/******/ var moduleId = queue.pop();
+/******/ var module = __webpack_require__.c[moduleId];
+/******/ if (!module) continue;
+/******/
+/******/ var data = {};
+/******/
+/******/ // Call dispose handlers
+/******/ var disposeHandlers = module.hot._disposeHandlers;
+/******/ for (j = 0; j < disposeHandlers.length; j++) {
+/******/ disposeHandlers[j].call(null, data);
+/******/ }
+/******/ __webpack_require__.hmrD[moduleId] = data;
+/******/
+/******/ // disable module (this disables requires from this module)
+/******/ module.hot.active = false;
+/******/
+/******/ // remove module from cache
+/******/ delete __webpack_require__.c[moduleId];
+/******/
+/******/ // when disposing there is no need to call dispose handler
+/******/ delete outdatedDependencies[moduleId];
+/******/
+/******/ // remove "parents" references from all children
+/******/ for (j = 0; j < module.children.length; j++) {
+/******/ var child = __webpack_require__.c[module.children[j]];
+/******/ if (!child) continue;
+/******/ idx = child.parents.indexOf(moduleId);
+/******/ if (idx >= 0) {
+/******/ child.parents.splice(idx, 1);
+/******/ }
+/******/ }
+/******/ }
+/******/
+/******/ // remove outdated dependency from module children
+/******/ var dependency;
+/******/ for (var outdatedModuleId in outdatedDependencies) {
+/******/ if (__webpack_require__.o(outdatedDependencies, outdatedModuleId)) {
+/******/ module = __webpack_require__.c[outdatedModuleId];
+/******/ if (module) {
+/******/ moduleOutdatedDependencies =
+/******/ outdatedDependencies[outdatedModuleId];
+/******/ for (j = 0; j < moduleOutdatedDependencies.length; j++) {
+/******/ dependency = moduleOutdatedDependencies[j];
+/******/ idx = module.children.indexOf(dependency);
+/******/ if (idx >= 0) module.children.splice(idx, 1);
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/ },
+/******/ apply: function (reportError) {
+/******/ // insert new code
+/******/ for (var updateModuleId in appliedUpdate) {
+/******/ if (__webpack_require__.o(appliedUpdate, updateModuleId)) {
+/******/ __webpack_require__.m[updateModuleId] = appliedUpdate[updateModuleId];
+/******/ }
+/******/ }
+/******/
+/******/ // run new runtime modules
+/******/ for (var i = 0; i < currentUpdateRuntime.length; i++) {
+/******/ currentUpdateRuntime[i](__webpack_require__);
+/******/ }
+/******/
+/******/ // call accept handlers
+/******/ for (var outdatedModuleId in outdatedDependencies) {
+/******/ if (__webpack_require__.o(outdatedDependencies, outdatedModuleId)) {
+/******/ var module = __webpack_require__.c[outdatedModuleId];
+/******/ if (module) {
+/******/ moduleOutdatedDependencies =
+/******/ outdatedDependencies[outdatedModuleId];
+/******/ var callbacks = [];
+/******/ var errorHandlers = [];
+/******/ var dependenciesForCallbacks = [];
+/******/ for (var j = 0; j < moduleOutdatedDependencies.length; j++) {
+/******/ var dependency = moduleOutdatedDependencies[j];
+/******/ var acceptCallback =
+/******/ module.hot._acceptedDependencies[dependency];
+/******/ var errorHandler =
+/******/ module.hot._acceptedErrorHandlers[dependency];
+/******/ if (acceptCallback) {
+/******/ if (callbacks.indexOf(acceptCallback) !== -1) continue;
+/******/ callbacks.push(acceptCallback);
+/******/ errorHandlers.push(errorHandler);
+/******/ dependenciesForCallbacks.push(dependency);
+/******/ }
+/******/ }
+/******/ for (var k = 0; k < callbacks.length; k++) {
+/******/ try {
+/******/ callbacks[k].call(null, moduleOutdatedDependencies);
+/******/ } catch (err) {
+/******/ if (typeof errorHandlers[k] === "function") {
+/******/ try {
+/******/ errorHandlers[k](err, {
+/******/ moduleId: outdatedModuleId,
+/******/ dependencyId: dependenciesForCallbacks[k]
+/******/ });
+/******/ } catch (err2) {
+/******/ if (options.onErrored) {
+/******/ options.onErrored({
+/******/ type: "accept-error-handler-errored",
+/******/ moduleId: outdatedModuleId,
+/******/ dependencyId: dependenciesForCallbacks[k],
+/******/ error: err2,
+/******/ originalError: err
+/******/ });
+/******/ }
+/******/ if (!options.ignoreErrored) {
+/******/ reportError(err2);
+/******/ reportError(err);
+/******/ }
+/******/ }
+/******/ } else {
+/******/ if (options.onErrored) {
+/******/ options.onErrored({
+/******/ type: "accept-errored",
+/******/ moduleId: outdatedModuleId,
+/******/ dependencyId: dependenciesForCallbacks[k],
+/******/ error: err
+/******/ });
+/******/ }
+/******/ if (!options.ignoreErrored) {
+/******/ reportError(err);
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/
+/******/ // Load self accepted modules
+/******/ for (var o = 0; o < outdatedSelfAcceptedModules.length; o++) {
+/******/ var item = outdatedSelfAcceptedModules[o];
+/******/ var moduleId = item.module;
+/******/ try {
+/******/ item.require(moduleId);
+/******/ } catch (err) {
+/******/ if (typeof item.errorHandler === "function") {
+/******/ try {
+/******/ item.errorHandler(err, {
+/******/ moduleId: moduleId,
+/******/ module: __webpack_require__.c[moduleId]
+/******/ });
+/******/ } catch (err2) {
+/******/ if (options.onErrored) {
+/******/ options.onErrored({
+/******/ type: "self-accept-error-handler-errored",
+/******/ moduleId: moduleId,
+/******/ error: err2,
+/******/ originalError: err
+/******/ });
+/******/ }
+/******/ if (!options.ignoreErrored) {
+/******/ reportError(err2);
+/******/ reportError(err);
+/******/ }
+/******/ }
+/******/ } else {
+/******/ if (options.onErrored) {
+/******/ options.onErrored({
+/******/ type: "self-accept-errored",
+/******/ moduleId: moduleId,
+/******/ error: err
+/******/ });
+/******/ }
+/******/ if (!options.ignoreErrored) {
+/******/ reportError(err);
+/******/ }
+/******/ }
+/******/ }
+/******/ }
+/******/
+/******/ return outdatedModules;
+/******/ }
+/******/ };
+/******/ }
+/******/ __webpack_require__.hmrI.jsonp = function (moduleId, applyHandlers) {
+/******/ if (!currentUpdate) {
+/******/ currentUpdate = {};
+/******/ currentUpdateRuntime = [];
+/******/ currentUpdateRemovedChunks = [];
+/******/ applyHandlers.push(applyHandler);
+/******/ }
+/******/ if (!__webpack_require__.o(currentUpdate, moduleId)) {
+/******/ currentUpdate[moduleId] = __webpack_require__.m[moduleId];
+/******/ }
+/******/ };
+/******/ __webpack_require__.hmrC.jsonp = function (
+/******/ chunkIds,
+/******/ removedChunks,
+/******/ removedModules,
+/******/ promises,
+/******/ applyHandlers,
+/******/ updatedModulesList
+/******/ ) {
+/******/ applyHandlers.push(applyHandler);
+/******/ currentUpdateChunks = {};
+/******/ currentUpdateRemovedChunks = removedChunks;
+/******/ currentUpdate = removedModules.reduce(function (obj, key) {
+/******/ obj[key] = false;
+/******/ return obj;
+/******/ }, {});
+/******/ currentUpdateRuntime = [];
+/******/ chunkIds.forEach(function (chunkId) {
+/******/ if (
+/******/ __webpack_require__.o(installedChunks, chunkId) &&
+/******/ installedChunks[chunkId] !== undefined
+/******/ ) {
+/******/ promises.push(loadUpdateChunk(chunkId, updatedModulesList));
+/******/ currentUpdateChunks[chunkId] = true;
+/******/ }
+/******/ });
+/******/ if (__webpack_require__.f) {
+/******/ __webpack_require__.f.jsonpHmr = function (chunkId, promises) {
+/******/ if (
+/******/ currentUpdateChunks &&
+/******/ !__webpack_require__.o(currentUpdateChunks, chunkId) &&
+/******/ __webpack_require__.o(installedChunks, chunkId) &&
+/******/ installedChunks[chunkId] !== undefined
+/******/ ) {
+/******/ promises.push(loadUpdateChunk(chunkId));
+/******/ currentUpdateChunks[chunkId] = true;
+/******/ }
+/******/ };
+/******/ }
+/******/ };
+/******/
+/******/ __webpack_require__.hmrM = () => {
+/******/ if (typeof fetch === "undefined") throw new Error("No browser support: need fetch API");
+/******/ return fetch(__webpack_require__.p + __webpack_require__.hmrF()).then((response) => {
+/******/ if(response.status === 404) return; // no update available
+/******/ if(!response.ok) throw new Error("Failed to fetch update manifest " + response.statusText);
+/******/ return response.json();
+/******/ });
+/******/ };
+/******/
+/******/ // no on chunks loaded
+/******/
+/******/ // no jsonp function
+/******/ })();
+/******/
+/************************************************************************/
+/******/
+/******/ // module cache are used so entry inlining is disabled
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ var __webpack_exports__ = __webpack_require__(0);
+/******/
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/hmr/expected/webpack-5/main.js b/test/cases/hmr/expected/webpack-5/main.js
index ae52744f..1642f5af 100644
--- a/test/cases/hmr/expected/webpack-5/main.js
+++ b/test/cases/hmr/expected/webpack-5/main.js
@@ -541,6 +541,7 @@ module.exports = function (urlString) {
/******/ }
/******/
/******/ function createModuleHotObject(moduleId, me) {
+/******/ var _main = currentChildModule !== moduleId;
/******/ var hot = {
/******/ // private stuff
/******/ _acceptedDependencies: {},
@@ -550,10 +551,10 @@ module.exports = function (urlString) {
/******/ _selfDeclined: false,
/******/ _selfInvalidated: false,
/******/ _disposeHandlers: [],
-/******/ _main: currentChildModule !== moduleId,
+/******/ _main: _main,
/******/ _requireSelf: function () {
/******/ currentParents = me.parents.slice();
-/******/ currentChildModule = moduleId;
+/******/ currentChildModule = _main ? undefined : moduleId;
/******/ __webpack_require__(moduleId);
/******/ },
/******/
@@ -1175,7 +1176,7 @@ module.exports = function (urlString) {
/******/ var module = __webpack_require__.c[outdatedModuleId];
/******/ if (
/******/ module &&
-/******/ module.hot._selfAccepted &&
+/******/ (module.hot._selfAccepted || module.hot._main) &&
/******/ // removed self-accepted modules should not be required
/******/ appliedUpdate[outdatedModuleId] !== warnUnexpectedRequire &&
/******/ // when called invalidate self-accepting is not possible
diff --git a/test/cases/insert-function/expected/webpack-5-importModule/1.css b/test/cases/insert-function/expected/webpack-5-importModule/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-function/expected/webpack-5-importModule/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-function/expected/webpack-5-importModule/1.js b/test/cases/insert-function/expected/webpack-5-importModule/1.js
new file mode 100644
index 00000000..df8cbd2a
--- /dev/null
+++ b/test/cases/insert-function/expected/webpack-5-importModule/1.js
@@ -0,0 +1,12 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-function/expected/webpack-5-importModule/main.js b/test/cases/insert-function/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..0dcaf369
--- /dev/null
+++ b/test/cases/insert-function/expected/webpack-5-importModule/main.js
@@ -0,0 +1,331 @@
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/ensure chunk */
+/******/ (() => {
+/******/ __webpack_require__.f = {};
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = (chunkId) => {
+/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ __webpack_require__.f[key](chunkId, promises);
+/******/ return promises;
+/******/ }, []));
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference async chunks
+/******/ __webpack_require__.u = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".css";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/css loading */
+/******/ (() => {
+/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ var linkTag = document.createElement("link");
+/******/
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ var onLinkComplete = (event) => {
+/******/ // avoid mem leaks.
+/******/ linkTag.onerror = linkTag.onload = null;
+/******/ if (event.type === 'load') {
+/******/ resolve();
+/******/ } else {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realHref = event && event.target && event.target.href || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.type = errorType;
+/******/ err.request = realHref;
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ }
+/******/ }
+/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ linkTag.href = fullhref;
+/******/
+/******/ (function (linkTag) {
+/******/ const reference = document.querySelector('.hot-reload');
+/******/
+/******/ if (reference) {
+/******/ reference.parentNode.insertBefore(linkTag, reference);
+/******/ }
+/******/ })(linkTag)
+/******/ return linkTag;
+/******/ };
+/******/ var findStylesheet = (href, fullhref) => {
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return tag;
+/******/ }
+/******/ };
+/******/ var loadStylesheet = (chunkId) => {
+/******/ return new Promise((resolve, reject) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ if(findStylesheet(href, fullhref)) return resolve();
+/******/ createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ });
+/******/ }
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }, (e) => {
+/******/ delete installedCssChunks[chunkId];
+/******/ throw e;
+/******/ }));
+/******/ }
+/******/ };
+/******/
+/******/ // no hmr
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.j = (chunkId, promises) => {
+/******/ // JSONP chunk loading for javascript
+/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ if(true) { // all chunks have JS
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ if(installedChunkData) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ installedChunkData[1](error);
+/******/ }
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ } else installedChunks[chunkId] = 0;
+/******/ }
+/******/ }
+/******/ };
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ // no on chunks loaded
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(__webpack_require__, 1));
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/insert-string/expected/webpack-5-importModule/1.css b/test/cases/insert-string/expected/webpack-5-importModule/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-string/expected/webpack-5-importModule/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-string/expected/webpack-5-importModule/1.js b/test/cases/insert-string/expected/webpack-5-importModule/1.js
new file mode 100644
index 00000000..df8cbd2a
--- /dev/null
+++ b/test/cases/insert-string/expected/webpack-5-importModule/1.js
@@ -0,0 +1,12 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-string/expected/webpack-5-importModule/main.js b/test/cases/insert-string/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..4d61b5dc
--- /dev/null
+++ b/test/cases/insert-string/expected/webpack-5-importModule/main.js
@@ -0,0 +1,326 @@
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/ensure chunk */
+/******/ (() => {
+/******/ __webpack_require__.f = {};
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = (chunkId) => {
+/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ __webpack_require__.f[key](chunkId, promises);
+/******/ return promises;
+/******/ }, []));
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference async chunks
+/******/ __webpack_require__.u = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".css";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/css loading */
+/******/ (() => {
+/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ var linkTag = document.createElement("link");
+/******/
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ var onLinkComplete = (event) => {
+/******/ // avoid mem leaks.
+/******/ linkTag.onerror = linkTag.onload = null;
+/******/ if (event.type === 'load') {
+/******/ resolve();
+/******/ } else {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realHref = event && event.target && event.target.href || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.type = errorType;
+/******/ err.request = realHref;
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ }
+/******/ }
+/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ linkTag.href = fullhref;
+/******/
+/******/ var target = document.querySelector("script[src='1.js']");
+/******/ target.parentNode.insertBefore(linkTag, target.nextSibling);
+/******/ return linkTag;
+/******/ };
+/******/ var findStylesheet = (href, fullhref) => {
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return tag;
+/******/ }
+/******/ };
+/******/ var loadStylesheet = (chunkId) => {
+/******/ return new Promise((resolve, reject) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ if(findStylesheet(href, fullhref)) return resolve();
+/******/ createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ });
+/******/ }
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }, (e) => {
+/******/ delete installedCssChunks[chunkId];
+/******/ throw e;
+/******/ }));
+/******/ }
+/******/ };
+/******/
+/******/ // no hmr
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.j = (chunkId, promises) => {
+/******/ // JSONP chunk loading for javascript
+/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ if(true) { // all chunks have JS
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ if(installedChunkData) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ installedChunkData[1](error);
+/******/ }
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ } else installedChunks[chunkId] = 0;
+/******/ }
+/******/ }
+/******/ };
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ // no on chunks loaded
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(__webpack_require__, 1));
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/insert-undefined/expected/webpack-5-importModule/1.css b/test/cases/insert-undefined/expected/webpack-5-importModule/1.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/insert-undefined/expected/webpack-5-importModule/1.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/insert-undefined/expected/webpack-5-importModule/1.js b/test/cases/insert-undefined/expected/webpack-5-importModule/1.js
new file mode 100644
index 00000000..df8cbd2a
--- /dev/null
+++ b/test/cases/insert-undefined/expected/webpack-5-importModule/1.js
@@ -0,0 +1,12 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1],[
+/* 0 */,
+/* 1 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+]]);
\ No newline at end of file
diff --git a/test/cases/insert-undefined/expected/webpack-5-importModule/main.js b/test/cases/insert-undefined/expected/webpack-5-importModule/main.js
new file mode 100644
index 00000000..b998720c
--- /dev/null
+++ b/test/cases/insert-undefined/expected/webpack-5-importModule/main.js
@@ -0,0 +1,325 @@
+/******/ (() => { // webpackBootstrap
+/******/ var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/ensure chunk */
+/******/ (() => {
+/******/ __webpack_require__.f = {};
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = (chunkId) => {
+/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ __webpack_require__.f[key](chunkId, promises);
+/******/ return promises;
+/******/ }, []));
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference async chunks
+/******/ __webpack_require__.u = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".css";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/css loading */
+/******/ (() => {
+/******/ var createStylesheet = (chunkId, fullhref, resolve, reject) => {
+/******/ var linkTag = document.createElement("link");
+/******/
+/******/ linkTag.rel = "stylesheet";
+/******/ linkTag.type = "text/css";
+/******/ var onLinkComplete = (event) => {
+/******/ // avoid mem leaks.
+/******/ linkTag.onerror = linkTag.onload = null;
+/******/ if (event.type === 'load') {
+/******/ resolve();
+/******/ } else {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realHref = event && event.target && event.target.href || fullhref;
+/******/ var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + realHref + ")");
+/******/ err.code = "CSS_CHUNK_LOAD_FAILED";
+/******/ err.type = errorType;
+/******/ err.request = realHref;
+/******/ linkTag.parentNode.removeChild(linkTag)
+/******/ reject(err);
+/******/ }
+/******/ }
+/******/ linkTag.onerror = linkTag.onload = onLinkComplete;
+/******/ linkTag.href = fullhref;
+/******/
+/******/ document.head.appendChild(linkTag);
+/******/ return linkTag;
+/******/ };
+/******/ var findStylesheet = (href, fullhref) => {
+/******/ var existingLinkTags = document.getElementsByTagName("link");
+/******/ for(var i = 0; i < existingLinkTags.length; i++) {
+/******/ var tag = existingLinkTags[i];
+/******/ var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
+/******/ if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
+/******/ }
+/******/ var existingStyleTags = document.getElementsByTagName("style");
+/******/ for(var i = 0; i < existingStyleTags.length; i++) {
+/******/ var tag = existingStyleTags[i];
+/******/ var dataHref = tag.getAttribute("data-href");
+/******/ if(dataHref === href || dataHref === fullhref) return tag;
+/******/ }
+/******/ };
+/******/ var loadStylesheet = (chunkId) => {
+/******/ return new Promise((resolve, reject) => {
+/******/ var href = __webpack_require__.miniCssF(chunkId);
+/******/ var fullhref = __webpack_require__.p + href;
+/******/ if(findStylesheet(href, fullhref)) return resolve();
+/******/ createStylesheet(chunkId, fullhref, resolve, reject);
+/******/ });
+/******/ }
+/******/ // object to store loaded CSS chunks
+/******/ var installedCssChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.miniCss = (chunkId, promises) => {
+/******/ var cssChunks = {"1":1};
+/******/ if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
+/******/ else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
+/******/ promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
+/******/ installedCssChunks[chunkId] = 0;
+/******/ }, (e) => {
+/******/ delete installedCssChunks[chunkId];
+/******/ throw e;
+/******/ }));
+/******/ }
+/******/ };
+/******/
+/******/ // no hmr
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 0: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.j = (chunkId, promises) => {
+/******/ // JSONP chunk loading for javascript
+/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ if(true) { // all chunks have JS
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ if(installedChunkData) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ installedChunkData[1](error);
+/******/ }
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ } else installedChunks[chunkId] = 0;
+/******/ }
+/******/ }
+/******/ };
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ // no on chunks loaded
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+/* eslint-env browser */
+
+// eslint-disable-next-line
+__webpack_require__.e(/* import() */ 1).then(__webpack_require__.bind(__webpack_require__, 1));
+
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/js-hash/expected/webpack-5-importModule/style.229314c8bccc7c31e2f3.1.css b/test/cases/js-hash/expected/webpack-5-importModule/style.229314c8bccc7c31e2f3.1.css
new file mode 100644
index 00000000..acf4122a
--- /dev/null
+++ b/test/cases/js-hash/expected/webpack-5-importModule/style.229314c8bccc7c31e2f3.1.css
@@ -0,0 +1,4 @@
+.dDtFvCqivX5dncL54de5D {
+ background: red;
+}
+
diff --git a/test/cases/js-hash/expected/webpack-5-importModule/style.334e3250146c69e0e055.2.css b/test/cases/js-hash/expected/webpack-5-importModule/style.334e3250146c69e0e055.2.css
new file mode 100644
index 00000000..825e4b99
--- /dev/null
+++ b/test/cases/js-hash/expected/webpack-5-importModule/style.334e3250146c69e0e055.2.css
@@ -0,0 +1,5 @@
+
+.dDtFvCqivX5dncL54de5D {
+ background: green;
+}
+
diff --git a/test/cases/runtime/expected/webpack-5-importModule/main.a7263f8f763dcf4051bc.css b/test/cases/runtime/expected/webpack-5-importModule/main.a7263f8f763dcf4051bc.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/runtime/expected/webpack-5-importModule/main.a7263f8f763dcf4051bc.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/runtime/expected/webpack-5-importModule/runtime~main.js b/test/cases/runtime/expected/webpack-5-importModule/runtime~main.js
new file mode 100644
index 00000000..512b1c4b
--- /dev/null
+++ b/test/cases/runtime/expected/webpack-5-importModule/runtime~main.js
@@ -0,0 +1,323 @@
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ({});
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __webpack_require__.m = __webpack_modules__;
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ var deferred = [];
+/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ if(chunkIds) {
+/******/ priority = priority || 0;
+/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ deferred[i] = [chunkIds, fn, priority];
+/******/ return;
+/******/ }
+/******/ var notFulfilled = Infinity;
+/******/ for (var i = 0; i < deferred.length; i++) {
+/******/ var [chunkIds, fn, priority] = deferred[i];
+/******/ var fulfilled = true;
+/******/ for (var j = 0; j < chunkIds.length; j++) {
+/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ chunkIds.splice(j--, 1);
+/******/ } else {
+/******/ fulfilled = false;
+/******/ if(priority < notFulfilled) notFulfilled = priority;
+/******/ }
+/******/ }
+/******/ if(fulfilled) {
+/******/ deferred.splice(i--, 1)
+/******/ result = fn();
+/******/ }
+/******/ }
+/******/ return result;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/create fake namespace object */
+/******/ (() => {
+/******/ var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
+/******/ var leafPrototypes;
+/******/ // create a fake namespace object
+/******/ // mode & 1: value is a module id, require it
+/******/ // mode & 2: merge all properties of value into the ns
+/******/ // mode & 4: return value when already ns object
+/******/ // mode & 16: return value when it's Promise-like
+/******/ // mode & 8|1: behave like require
+/******/ __webpack_require__.t = function(value, mode) {
+/******/ if(mode & 1) value = this(value);
+/******/ if(mode & 8) return value;
+/******/ if(typeof value === 'object' && value) {
+/******/ if((mode & 4) && value.__esModule) return value;
+/******/ if((mode & 16) && typeof value.then === 'function') return value;
+/******/ }
+/******/ var ns = Object.create(null);
+/******/ __webpack_require__.r(ns);
+/******/ var def = {};
+/******/ leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
+/******/ for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
+/******/ Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
+/******/ }
+/******/ def['default'] = () => (value);
+/******/ __webpack_require__.d(ns, def);
+/******/ return ns;
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/ensure chunk */
+/******/ (() => {
+/******/ __webpack_require__.f = {};
+/******/ // This file contains only the entry chunk.
+/******/ // The chunk loading function for additional chunks
+/******/ __webpack_require__.e = (chunkId) => {
+/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
+/******/ __webpack_require__.f[key](chunkId, promises);
+/******/ return promises;
+/******/ }, []));
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get javascript chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference async chunks
+/******/ __webpack_require__.u = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + chunkId + ".js";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/get mini-css chunk filename */
+/******/ (() => {
+/******/ // This function allow to reference all chunks
+/******/ __webpack_require__.miniCssF = (chunkId) => {
+/******/ // return url for filenames based on template
+/******/ return "" + "main" + "." + "a7263f8f763dcf4051bc" + ".css";
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/global */
+/******/ (() => {
+/******/ __webpack_require__.g = (function() {
+/******/ if (typeof globalThis === 'object') return globalThis;
+/******/ try {
+/******/ return this || new Function('return this')();
+/******/ } catch (e) {
+/******/ if (typeof window === 'object') return window;
+/******/ }
+/******/ })();
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/load script */
+/******/ (() => {
+/******/ var inProgress = {};
+/******/ // data-webpack is not used as build has no uniqueName
+/******/ // loadScript function to load a script via script tag
+/******/ __webpack_require__.l = (url, done, key, chunkId) => {
+/******/ if(inProgress[url]) { inProgress[url].push(done); return; }
+/******/ var script, needAttach;
+/******/ if(key !== undefined) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ for(var i = 0; i < scripts.length; i++) {
+/******/ var s = scripts[i];
+/******/ if(s.getAttribute("src") == url) { script = s; break; }
+/******/ }
+/******/ }
+/******/ if(!script) {
+/******/ needAttach = true;
+/******/ script = document.createElement('script');
+/******/
+/******/ script.charset = 'utf-8';
+/******/ script.timeout = 120;
+/******/ if (__webpack_require__.nc) {
+/******/ script.setAttribute("nonce", __webpack_require__.nc);
+/******/ }
+/******/
+/******/ script.src = url;
+/******/ }
+/******/ inProgress[url] = [done];
+/******/ var onScriptComplete = (prev, event) => {
+/******/ // avoid mem leaks in IE.
+/******/ script.onerror = script.onload = null;
+/******/ clearTimeout(timeout);
+/******/ var doneFns = inProgress[url];
+/******/ delete inProgress[url];
+/******/ script.parentNode && script.parentNode.removeChild(script);
+/******/ doneFns && doneFns.forEach((fn) => (fn(event)));
+/******/ if(prev) return prev(event);
+/******/ }
+/******/ ;
+/******/ var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
+/******/ script.onerror = onScriptComplete.bind(null, script.onerror);
+/******/ script.onload = onScriptComplete.bind(null, script.onload);
+/******/ needAttach && document.head.appendChild(script);
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/publicPath */
+/******/ (() => {
+/******/ var scriptUrl;
+/******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ var document = __webpack_require__.g.document;
+/******/ if (!scriptUrl && document) {
+/******/ if (document.currentScript)
+/******/ scriptUrl = document.currentScript.src
+/******/ if (!scriptUrl) {
+/******/ var scripts = document.getElementsByTagName("script");
+/******/ if(scripts.length) scriptUrl = scripts[scripts.length - 1].src
+/******/ }
+/******/ }
+/******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
+/******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
+/******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
+/******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
+/******/ __webpack_require__.p = scriptUrl;
+/******/ })();
+/******/
+/******/ /* webpack/runtime/jsonp chunk loading */
+/******/ (() => {
+/******/ // no baseURI
+/******/
+/******/ // object to store loaded and loading chunks
+/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ var installedChunks = {
+/******/ 1: 0
+/******/ };
+/******/
+/******/ __webpack_require__.f.j = (chunkId, promises) => {
+/******/ // JSONP chunk loading for javascript
+/******/ var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
+/******/ if(installedChunkData !== 0) { // 0 means "already installed".
+/******/
+/******/ // a Promise means "currently loading".
+/******/ if(installedChunkData) {
+/******/ promises.push(installedChunkData[2]);
+/******/ } else {
+/******/ if(1 != chunkId) {
+/******/ // setup Promise in chunk cache
+/******/ var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
+/******/ promises.push(installedChunkData[2] = promise);
+/******/
+/******/ // start chunk loading
+/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
+/******/ // create error before stack unwound to get useful stacktrace later
+/******/ var error = new Error();
+/******/ var loadingEnded = (event) => {
+/******/ if(__webpack_require__.o(installedChunks, chunkId)) {
+/******/ installedChunkData = installedChunks[chunkId];
+/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
+/******/ if(installedChunkData) {
+/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
+/******/ var realSrc = event && event.target && event.target.src;
+/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+/******/ error.name = 'ChunkLoadError';
+/******/ error.type = errorType;
+/******/ error.request = realSrc;
+/******/ installedChunkData[1](error);
+/******/ }
+/******/ }
+/******/ };
+/******/ __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
+/******/ } else installedChunks[chunkId] = 0;
+/******/ }
+/******/ }
+/******/ };
+/******/
+/******/ // no prefetching
+/******/
+/******/ // no preloaded
+/******/
+/******/ // no HMR
+/******/
+/******/ // no HMR manifest
+/******/
+/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/
+/******/ // install a JSONP callback for chunk loading
+/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ var [chunkIds, moreModules, runtime] = data;
+/******/ // add "moreModules" to the modules object,
+/******/ // then flag all "chunkIds" as loaded and fire callback
+/******/ var moduleId, chunkId, i = 0;
+/******/ for(moduleId in moreModules) {
+/******/ if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ }
+/******/ }
+/******/ if(runtime) runtime(__webpack_require__);
+/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ for(;i < chunkIds.length; i++) {
+/******/ chunkId = chunkIds[i];
+/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ installedChunks[chunkId][0]();
+/******/ }
+/******/ installedChunks[chunkIds[i]] = 0;
+/******/ }
+/******/ __webpack_require__.O();
+/******/ }
+/******/
+/******/ var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ })();
+/******/
+/************************************************************************/
+var __webpack_exports__ = {};
+__webpack_require__.O();
+/******/ })()
+;
\ No newline at end of file
diff --git a/test/cases/split-chunks-all/expected/webpack-5-importModule/2.css b/test/cases/split-chunks-all/expected/webpack-5-importModule/2.css
new file mode 100644
index 00000000..cebc5c1c
--- /dev/null
+++ b/test/cases/split-chunks-all/expected/webpack-5-importModule/2.css
@@ -0,0 +1,4 @@
+body {
+ background: red;
+}
+
diff --git a/test/cases/split-chunks-all/expected/webpack-5-importModule/2.js b/test/cases/split-chunks-all/expected/webpack-5-importModule/2.js
new file mode 100644
index 00000000..c8d4dd4f
--- /dev/null
+++ b/test/cases/split-chunks-all/expected/webpack-5-importModule/2.js
@@ -0,0 +1 @@
+MISSING
diff --git a/test/helpers/snapshotResolver.js b/test/helpers/snapshotResolver.js
index 742ee5b6..bb368528 100644
--- a/test/helpers/snapshotResolver.js
+++ b/test/helpers/snapshotResolver.js
@@ -7,7 +7,13 @@ const [webpackVersion] = webpack.version;
const snapshotExtension = `.snap.webpack${webpackVersion}`;
// eslint-disable-next-line no-console
-console.log('Current webpack version:', webpackVersion);
+console.log(
+ 'Current webpack version:',
+ webpackVersion,
+ process.env.EXPERIMENTAL_USE_IMPORT_MODULE
+ ? '(experimental use importModule)'
+ : ''
+);
module.exports = {
resolveSnapshotPath: (testPath) =>
diff --git a/test/manual/webpack.config.js b/test/manual/webpack.config.js
index 06412542..3b4bf633 100644
--- a/test/manual/webpack.config.js
+++ b/test/manual/webpack.config.js
@@ -10,6 +10,11 @@ const ENABLE_ES_MODULE =
? Boolean(process.env.ES_MODULE)
: true;
+const ENABLE_EXPERIMENTAL_USE_IMPORT_MODULE =
+ typeof process.env.EXPERIMENTAL_USE_IMPORT_MODULE !== 'undefined'
+ ? Boolean(process.env.EXPERIMENTAL_USE_IMPORT_MODULE)
+ : true;
+
module.exports = {
mode: 'development',
output: {
@@ -58,6 +63,7 @@ module.exports = {
new Self({
filename: '[name].css',
chunkFilename: '[name].chunk.css',
+ experimentalUseImportModule: ENABLE_EXPERIMENTAL_USE_IMPORT_MODULE,
}),
],
devServer: {