pax_global_header 0000666 0000000 0000000 00000000064 15161222650 0014512 g ustar 00root root 0000000 0000000 52 comment=d50f981f3ffee8ffd668ca712a9e4d904ed1c5a9
mini-css-extract-plugin-2.10.2/ 0000775 0000000 0000000 00000000000 15161222650 0016262 5 ustar 00root root 0000000 0000000 mini-css-extract-plugin-2.10.2/.cspell.json 0000664 0000000 0000000 00000001462 15161222650 0020520 0 ustar 00root root 0000000 0000000 {
"version": "0.2",
"language": "en,en-gb",
"words": [
"publicpath",
"memfs",
"crossorigin",
"Crossorigin",
"camelcase",
"unreload",
"cnfg",
"sorhus",
"sindre",
"staticc",
"deepc",
"pathinfo",
"iife",
"IIFE",
"fullhref",
"Unexception",
"fullhash",
"truetype",
"entrypoints",
"plusplus",
"hotreloading",
"chunkhash",
"concat",
"nosources",
"hspace",
"vspace",
"commitlint",
"unreload",
"cnfg",
"tapable"
],
"ignorePaths": [
"CHANGELOG.md",
"package.json",
"dist/**",
"**/__snapshots__/**",
"package-lock.json",
"/test/js",
"/test/outputs",
"/test/cases",
"/test/fixtures",
"/test/manual/dist",
"node_modules",
"coverage",
"*.log"
]
}
mini-css-extract-plugin-2.10.2/.editorconfig 0000664 0000000 0000000 00000000303 15161222650 0020733 0 ustar 00root root 0000000 0000000 # editorconfig.org
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
mini-css-extract-plugin-2.10.2/.gitattributes 0000664 0000000 0000000 00000000125 15161222650 0021153 0 ustar 00root root 0000000 0000000 package-lock.json -diff
* text=auto
test/cases/* eol=lf
bin/* eol=lf
yarn.lock -diff
mini-css-extract-plugin-2.10.2/.github/ 0000775 0000000 0000000 00000000000 15161222650 0017622 5 ustar 00root root 0000000 0000000 mini-css-extract-plugin-2.10.2/.github/workflows/ 0000775 0000000 0000000 00000000000 15161222650 0021657 5 ustar 00root root 0000000 0000000 mini-css-extract-plugin-2.10.2/.github/workflows/dependency-review.yml 0000664 0000000 0000000 00000000450 15161222650 0026016 0 ustar 00root root 0000000 0000000 name: "Dependency Review"
on: [pull_request]
permissions:
contents: read
jobs:
dependency-review:
runs-on: ubuntu-latest
steps:
- name: "Checkout Repository"
uses: actions/checkout@v4
- name: "Dependency Review"
uses: actions/dependency-review-action@v4
mini-css-extract-plugin-2.10.2/.github/workflows/nodejs.yml 0000664 0000000 0000000 00000013026 15161222650 0023666 0 ustar 00root root 0000000 0000000 name: mini-css-extract-plugin
on:
push:
branches:
- main
- next
pull_request:
branches:
- main
- next
permissions:
contents: read
jobs:
lint:
name: Lint - ${{ matrix.os }} - Node v${{ matrix.node-version }}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
strategy:
matrix:
os: [ubuntu-latest]
node-version: [lts/*]
runs-on: ${{ matrix.os }}
concurrency:
group: lint-${{ matrix.os }}-v${{ matrix.node-version }}-${{ github.ref }}
cancel-in-progress: true
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: "npm"
- name: Install dependencies
run: npm ci
- name: Lint
run: npm run lint
- name: Build types
run: npm run build:types
- name: Check types
run: if [ -n "$(git status types --porcelain)" ]; then echo "Missing types. Update types by running 'npm run build:types'"; exit 1; else echo "All types are valid"; fi
- name: Security audit
run: npm run security
- name: Validate PR commits with commitlint
if: github.event_name == 'pull_request'
run: npx commitlint --from ${{ github.event.pull_request.head.sha }}~${{ github.event.pull_request.commits }} --to ${{ github.event.pull_request.head.sha }} --verbose
test:
name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }}
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [12.x, 14.x, 16.x, 18.x, 20.x, 22.x, 24.x]
webpack-version: [latest]
runs-on: ${{ matrix.os }}
concurrency:
group: test-${{ matrix.os }}-v${{ matrix.node-version }}-${{ matrix.webpack-version }}-${{ github.ref }}
cancel-in-progress: true
steps:
- name: Setup Git
if: matrix.os == 'windows-latest'
run: git config --global core.autocrlf input
- uses: actions/checkout@v4
- uses: actions/github-script@v7
id: calculate_architecture
with:
result-encoding: string
script: |
if ('${{ matrix.os }}' === 'macos-latest' && ('${{ matrix['node-version'] }}' === '12.x' || '${{ matrix['node-version'] }}' === '14.x')) {
return "x64"
} else {
return ''
}
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
architecture: ${{ steps.calculate_architecture.outputs.result }}
cache: "npm"
- name: Install dependencies (old Node.js version)
run: |
rm package-lock.json
npm install --ignore-engines --ignore-scripts
npm install -D typescript@4
if: matrix.node-version == '12.x' || matrix.node-version == '14.x' || matrix.node-version == '16.x' || matrix.node-version == '18.x'
- name: Install dependencies
run: npm ci
if: matrix.node-version == '20.x' || matrix.node-version == '22.x' || matrix.node-version == '24.x'
- name: Install webpack ${{ matrix.webpack-version }}
if: matrix.webpack-version != 'latest'
run: npm i webpack@${{ matrix.webpack-version }}
- name: Run tests for webpack version ${{ matrix.webpack-version }}
run: npm run test:coverage -- --ci
- name: Submit coverage data to codecov
uses: codecov/codecov-action@v5
with:
token: ${{ secrets.CODECOV_TOKEN }}
test-old-api:
name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack latest, old API
strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
node-version: [12.x, 14.x, 16.x, 18.x, 20.x, 22.x, 24.x]
runs-on: ${{ matrix.os }}
steps:
- name: Setup Git
if: matrix.os == 'windows-latest'
run: git config --global core.autocrlf input
- uses: actions/checkout@v4
- uses: actions/github-script@v7
id: calculate_architecture
with:
result-encoding: string
script: |
if ('${{ matrix.os }}' === 'macos-latest' && ('${{ matrix['node-version'] }}' === '12.x' || '${{ matrix['node-version'] }}' === '14.x')) {
return "x64"
} else {
return ''
}
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
architecture: ${{ steps.calculate_architecture.outputs.result }}
cache: "npm"
- name: Install dependencies (old Node.js version)
run: |
rm package-lock.json
npm install --ignore-engines --ignore-scripts
npm install -D typescript@4
if: matrix.node-version == '12.x' || matrix.node-version == '14.x' || matrix.node-version == '16.x' || matrix.node-version == '18.x'
- name: Install dependencies
run: npm ci
if: matrix.node-version == '20.x' || matrix.node-version == '22.x' || matrix.node-version == '24.x'
- name: Run tests for webpack version latest with experimentalUseImportModule
run: npm run test:coverage -- --ci
env:
OLD_API: "true"
- name: Submit coverage data to codecov
uses: codecov/codecov-action@v5
with:
token: ${{ secrets.CODECOV_TOKEN }}
mini-css-extract-plugin-2.10.2/.gitignore 0000664 0000000 0000000 00000000322 15161222650 0020247 0 ustar 00root root 0000000 0000000 logs
*.log
npm-debug.log*
.eslintcache
/coverage
/dist
/test/js
/test/outputs
/test/manual/dist
/local
/reports
/node_modules
.DS_Store
Thumbs.db
.idea
.vscode
*.sublime-project
*.sublime-workspace
.idea
*.iml
mini-css-extract-plugin-2.10.2/.husky/ 0000775 0000000 0000000 00000000000 15161222650 0017503 5 ustar 00root root 0000000 0000000 mini-css-extract-plugin-2.10.2/.husky/commit-msg 0000775 0000000 0000000 00000000120 15161222650 0021476 0 ustar 00root root 0000000 0000000 #!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
mini-css-extract-plugin-2.10.2/.husky/pre-commit 0000775 0000000 0000000 00000000107 15161222650 0021503 0 ustar 00root root 0000000 0000000 #!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
mini-css-extract-plugin-2.10.2/.prettierignore 0000664 0000000 0000000 00000000154 15161222650 0021325 0 ustar 00root root 0000000 0000000 /coverage
/dist
/node_modules
/test/fixtures
/test/manual/dist
/test/cases/*/expected
/test/js
CHANGELOG.md
mini-css-extract-plugin-2.10.2/CHANGELOG.md 0000664 0000000 0000000 00000114401 15161222650 0020074 0 ustar 00root root 0000000 0000000 # Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [2.10.2](https://github.com/webpack/mini-css-extract-plugin/compare/v2.10.1...v2.10.2) (2026-03-26)
### Bug Fixes
* use matchResource for importModule when available ([#1162](https://github.com/webpack/mini-css-extract-plugin/issues/1162)) ([143693e](https://github.com/webpack/mini-css-extract-plugin/commit/143693ee021ef0f87ec58bb4e161d1f2d0cf3d30))
### [2.10.1](https://github.com/webpack/mini-css-extract-plugin/compare/v2.10.0...v2.10.1) (2026-03-10)
### Bug Fixes
* handle null module.layer in renderContentAsset ([#1159](https://github.com/webpack/mini-css-extract-plugin/issues/1159)) ([0233180](https://github.com/webpack/mini-css-extract-plugin/commit/0233180faf7b2a267da60134852877bc65859b7d))
## [2.10.0](https://github.com/webpack/mini-css-extract-plugin/compare/v2.9.4...v2.10.0) (2026-01-16)
### Features
* respect `output.cssFilename` and `output.cssChunkFilename` ([#1151](https://github.com/webpack/mini-css-extract-plugin/issues/1151)) ([54f775d](https://github.com/webpack/mini-css-extract-plugin/commit/54f775ddac6ea365b9023ab0624f8219695371b3))
### Bug Fixes
* prevent generation of a contentHash for a chunk when the set of css modules is of size 0 ([#1154](https://github.com/webpack/mini-css-extract-plugin/issues/1154)) ([4e4a95d](https://github.com/webpack/mini-css-extract-plugin/commit/4e4a95d16431bca442b7ac5d90c887142e3ce117))
### [2.9.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.9.3...v2.9.4) (2025-08-11)
### Bug Fixes
* hmr crash in some situations ([#1140](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1140)) ([f67c05a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/f67c05a2305dbfc0f949ce9f11c96c32cb402deb))
### [2.9.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.9.2...v2.9.3) (2025-08-04)
### Bug Fixes
* should update initial chunks correctly with filename ([dab023f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/dab023f4a7685bc20ef175e71dacd78d988e3713))
### [2.9.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.9.1...v2.9.2) (2024-11-01)
### Bug Fixes
* prefetch and preload runtime generation ([#1116](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1116)) ([58c6b74](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/58c6b7422aedfd3fc4d5f3553b196da40eae1f4b))
### [2.9.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.9.0...v2.9.1) (2024-08-19)
### Bug Fixes
* add `export default {}` when CSS modules enabled and a file is empty for the `defaultExport` option ([8f77e19](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/8f77e19a89eca97b05f1855d2c851592e98ff774))
## [2.9.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.8.1...v2.9.0) (2024-04-16)
### Features
* add support for link preload/prefetch ([#1043](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1043)) ([ee25e51](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/ee25e51a8d06292dd8643f5bf1d6c4faa51c4f4c))
* added the `defaultExport` option to generate default and named export together ([#1084](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1084)) ([74ae781](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/74ae78184fb5bfeec23b9d254ff8304c6fc854d6))
### Bug Fixes
* avoid reloading all csses when hot load ([#1090](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1090)) ([1a56673](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/1a56673d01c441967134beb5d9500a7d6d62e4de))
### [2.8.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.8.0...v2.8.1) (2024-02-27)
### Bug Fixes
* add `nonce` if `__webpack_nonce__` has been defined ([c7f0aee](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/c7f0aee5feaa1b8d047f575e94a91662eb8c314c))
## [2.8.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.7...v2.8.0) (2024-02-01)
### Features
* added the `beforeTagInsert` hook ([#1054](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1054)) ([6313bf6](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6313bf629c1c76ec7b07dc60fef06e39702a63d9))
* support named exports with any characters ([b656c5c](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b656c5c98dcffcae51f5208e961ce089be6607a8))
### [2.7.7](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.6...v2.7.7) (2024-01-10)
### Bug Fixes
* add ';' to import media queries ([#1051](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1051)) ([98acf2b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/98acf2bbd08ba0988318c6d364b9aa14f84ed79a))
* add `ChunkLoadError` name to chunk loading error ([#1073](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1073)) ([e3f8375](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e3f837574bdad9dc583028c6f9a9a2f3082d9ecb))
* adding media, supports and layer for external import ([#1072](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1072)) ([60c5331](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/60c53311c125425d2e742414ed6dbd59cea8cbe4))
* css experiment detection ([#1067](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1067)) ([82f4a47](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/82f4a47f3ddc7cdbba311bee50d85dd4b3e6bfb1))
### [2.7.6](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.5...v2.7.6) (2023-05-19)
### Bug Fixes
* compatibility with built-in CSS support ([#1035](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1035)) ([f576ed6](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/f576ed6a530db555d7442ebab1f9a09f3acff13f))
### [2.7.5](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.4...v2.7.5) (2023-03-16)
### Bug Fixes
* don't invalidate cache after timeout refresh ([#1023](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1023)) ([38d8513](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/38d8513f97983698b3b4417abb8bacaee0ea68fb))
* readable identifier ([#1024](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1024)) ([721bbf1](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/721bbf104030c96acff14ad2b7a23edc4f1e277d))
### [2.7.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.3...v2.7.4) (2023-03-16)
### Bug Fixes
* module identifier, don't merge modules with different media/suppors/layer ([#1021](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1021)) ([ad3729b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/ad3729ba9d3fed328a170340eafb66e8c2a13bdc))
### [2.7.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.2...v2.7.3) (2023-03-07)
### Bug Fixes
* avoid to throw error when link doesn't have parentNode ([#1016](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1016)) ([6292440](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/62924409895ff6e0e4e599f6734c109ec40e6eff))
### [2.7.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.1...v2.7.2) (2022-12-06)
### Bug Fixes
* don't crash in web workers ([#1004](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1004)) ([4d98d4b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/4d98d4b973be27910b84194e6f7acb1d09f1e8ae))
### [2.7.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.7.0...v2.7.1) (2022-11-29)
### Bug Fixes
* preserve order of link tags on HMR ([#982](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/982)) ([6ea0922](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6ea092258944fd0330b84dd3455bff9a15320837))
## [2.7.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.6.1...v2.7.0) (2022-11-16)
### Features
* add function support for locals (loader) ([#985](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/985)) ([65519d0](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/65519d0701b3c5d60585468b8220159cbbfbe6b8))
### [2.6.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.6.0...v2.6.1) (2022-06-15)
### Bug Fixes
* do not attempt hot reloading when emit is false ([#953](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/953)) ([b426f04](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b426f04961846991e8ca671c6a4d48e6a83a46c2))
## [2.6.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.5.3...v2.6.0) (2022-03-03)
### Features
* added `baseUri` option support (from entry options) ([#915](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/915)) ([6004d95](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6004d95cad2d18d9d080d913db7dc48f16bf888c))
### [2.5.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.5.2...v2.5.3) (2022-01-25)
### Bug Fixes
* types ([#903](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/903)) ([6650691](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6650691f7e6a45004779566c909a0e48e9d67f04))
### [2.5.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.5.1...v2.5.2) (2022-01-17)
### Bug Fixes
* types ([dfb9afd](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/dfb9afdfb2ea6c816d6d4986fbb382dac300e7ea))
### [2.5.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.5.0...v2.5.1) (2022-01-17)
### Bug Fixes
* cjs export and types ([e836a00](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e836a00cb164fecdb49e670e0552475477fa7994))
## [2.5.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.7...v2.5.0) (2022-01-14)
### Features
* added types ([5b5654c](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/5b5654c9847a615555660d79245b857536f72124))
### [2.4.7](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.6...v2.4.7) (2022-01-13)
### Bug Fixes
* multiple serializer registrations ([#894](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/894)) ([c784204](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/c784204772538ab8984e1c25e4501a7602b41ad1))
### [2.4.6](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.5...v2.4.6) (2022-01-06)
### Bug Fixes
* crash when `publicPath` is function ([#881](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/881)) ([41bd828](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/41bd828ba11baf2c1349b3a8103072e2d82fd4c2))
* do not allow absolute path in the `chunkFilename` option ([#879](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/879)) ([36e04ab](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/36e04ab8b5e55d429ce361841e77f6ddba934ee1))
* do not allow absolute path in the `filename` option ([#878](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/878)) ([76361df](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/76361df4220f62c18b3660af76ab8b28c56d0471))
### [2.4.5](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.4...v2.4.5) (2021-11-17)
### Chore
* update `schema-utils` package to `4.0.0` version
### [2.4.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.3...v2.4.4) (2021-11-04)
### Bug Fixes
* crash with `[contenthash]` ([#869](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/869)) ([57ad127](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/57ad1274328512aebb20fa3b2c27fb9321f835a7))
* runtime path in modules without context ([#866](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/866)) ([e2e30b2](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e2e30b280d51f313e3ac566af3b839e580b22ef5))
### [2.4.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.2...v2.4.3) (2021-10-21)
### Bug Fixes
* small perf improvement ([#860](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/860)) ([8c4846b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/8c4846b3a55770cb7286b1f092e619204503ed7f))
### [2.4.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.1...v2.4.2) (2021-10-07)
### Bug Fixes
* endless apply of loaders, leading to memory allocation failure ([#849](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/849)) ([94ad699](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/94ad699baa1805a0646e7db1d69eb5997df6c8db))
### [2.4.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.4.0...v2.4.1) (2021-10-05)
### Bug Fixes
* crash with multiple webpack versions ([#845](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/845)) ([b4431cb](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b4431cb60a6eadcf8c2b614f494faf899c73aaa0))
## [2.4.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.3.0...v2.4.0) (2021-10-05)
### Performance
* migrate on new API, this improves performance and memory usage a lot, you need to have at least webpack `5.52.0` (recommended latest stable), for older versions the old API will be used (except explicit enabling of the `experimentalUseImportModule` option)
### Features
* added support for `supports()` and `layer()` in `@import` at-rule ([#843](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/843)) ([e751080](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e751080ad6a81f196d5c26fb79b3c69b9429a634))
### Bug Fixes
* crash with the `exportLocalsConvention` option ([#844](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/844)) ([0f8d501](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0f8d5015c95724b537ddc627758f67020d01ae0b))
## [2.3.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.2.2...v2.3.0) (2021-09-11)
### Features
* added the `runtime` option ([#831](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/831)) ([5cc73e6](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/5cc73e6b590632263fc6ea0a830df1322520c2f4))
### Bug Fixes
* better description for async chunk options ([34b65ac](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/34b65ac4daea5a977a75846b159becbc2ebb0632))
### [2.2.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.2.1...v2.2.2) (2021-09-01)
### Bug Fixes
* `experimentalUseImportModule` works with `new URL(...)` syntax ([cf81c4b](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/cf81c4b9962e74d666f6bb7d6473a9b6c06936cd))
### [2.2.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.2.0...v2.2.1) (2021-08-31)
### Bug Fixes
* order of `@import` with the `output.pathinfo` option ([#815](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/815)) ([831f771](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/831f771b3c5e59978dbc53f1ccc90e23a9e30e9b))
* source map generation with the `output.pathinfo` option ([#817](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/817)) ([f813b4c](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/f813b4c7b72383b8777da74b90830be20db6a483))
## [2.2.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.0.0...v2.2.0) (2021-08-04)
### Features
* add `link` and `description` for options ([#786](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/786)) ([3c5a5b7](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/3c5a5b7aba8ed855368a7e95d89420b97dcd1531))
### Bug Fixes
* hmr in browser extension ([3d09da1](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/3d09da1abb9250b39c6a15efd33950aa19efb0b3))
## [2.1.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.0.0...v2.1.0) (2021-07-05)
### Features
* support the `pathinfo` option ([#783](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/783)) ([a37713f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a37713f53bcecb9efc3f8a4d389c6274dae0bc85))
## [2.0.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.6.2...v2.0.0) (2021-06-30)
### NOTES
In the current release we have fixed many problems with `publicPath`, previously to generate relative URLs inside CSS files developers use different hacks: `publicPath: ''`, `publicPath: '../'`, using relative `../../` in the `outputPath` option for `file-loader` and etc. Now you don't need it anymore. Webpack v5 uses `publicPath: "auto"` by default, which means to always generate relative URLs, and now `mini-css-extract-plugin` does the same.
**We strongly recommend use `auto` value by default (except when using CDN).**
**We also want to show you that the [`file-loader`](https://github.com/webpack-contrib/file-loader) and [`url-loader`](https://github.com/webpack-contrib/url-loader) are outdated, please migrate on [Asset Modules](https://webpack.js.org/guides/asset-modules/).**
### ⚠ BREAKING CHANGES
* minimum supported `Node.js` version is `12.13.0`
* minimum supported `webpack` version is `5.0.0`
* the `modules.namedExport` option was removed, you don't need it anymore, because we respect the `modules.namedExport` option from `css-loader`, just remove it
* the `publicPath` option no longer automatically adds `/` (trailing slash), you need to specify, you need to specify it yourself if it is absent, i.e. if you have `publicPath: "/my/public/path"` replace it with `publicPath: "/my/public/path/"`
### Bug Fixes
* generating correct relative `url()` for assets inside CSS files when you use `publicPath: "auto"` (default value)
### [1.6.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.6.1...v1.6.2) (2021-06-28)
### Bug Fixes
* performance improvement
### [1.6.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.6.0...v1.6.1) (2021-06-25)
### Bug Fixes
* memory leaks ([c68aca7](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/c68aca7c58b1bfb3d3f9f8db70fd814e50f82aa1))
## [1.6.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.5.1...v1.6.0) (2021-04-30)
### Features
* added new url support ([#753](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/753)) ([c76a1a1](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/c76a1a16b926e3dc8f6763d940ab6e4eb170c77f))
### [1.5.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.5.0...v1.5.1) (2021-04-28)
### Bug Fixes
* compatibility with named export and es5 ([#751](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/751)) ([3be81bb](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/3be81bb4e795fc9295c2c7e7a8bb71de9cead2d0))
## [1.5.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.4.1...v1.5.0) (2021-04-17)
### Features
* add experimental support for `importModule`, improve perfomance ([#737](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/737)) ([8471ac2](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/8471ac24dde3d7e874995f8ab4814cc94b4179e1))
### [1.4.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.4.0...v1.4.1) (2021-04-07)
### Bug Fixes
* ES5 compatibility ([43e081f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/43e081f3a2767f3c00a29349a71ad17eca9cc168))
## [1.4.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.9...v1.4.0) (2021-03-26)
### Features
* added the `emit` option for SSR ([#732](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/732)) ([03b4293](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/03b4293023e85e89abf46a2e42d61ec8684cb318))
### [1.3.9](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.8...v1.3.9) (2021-02-25)
### Bug Fixes
* allow consumers to access `CssModule` and `CssDependency` ([#703](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/703)) ([6484345](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/64843452a7c07963637a749bce9628d808694eac))
* allow to use `auto` value with the `publicPath` option ([#709](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/709)) ([1be21d2](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/1be21d29053c32cfec26eb58aa5deabd65069c71))
### [1.3.8](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.7...v1.3.8) (2021-02-18)
### Bug Fixes
* deterministic `[contenthash]` ([#702](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/702)) ([2ff8e59](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2ff8e592e13d54dc87fad4fcf5065136d4610dca))
### [1.3.7](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.6...v1.3.7) (2021-02-15)
### Bug Fixes
* compatibility with webpack v5 ([9b6b8b3](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/9b6b8b3a8393a62b7b7a3b38c0c52b694ed51e19))
### [1.3.6](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.5...v1.3.6) (2021-02-08)
### Bug Fixes
* do not crash on using `[fullhash]` ([#695](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/695)) ([dbb708c](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/dbb708cf181d8f3d69af11cc15f959f187e38ffa))
### [1.3.5](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.4...v1.3.5) (2021-01-28)
### Bug Fixes
* bloated runtime ([#687](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/687)) ([70ce174](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/70ce174941016174bb82ff46c808593a1e1b7e1e))
* hmr runtime on preloaded stylesheet link ([#686](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/686)) ([05e2951](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/05e29514952bf3ff3f30ec33c4bda66999d8486b))
* yarn pnp compatibility ([#688](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/688)) ([05b188a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/05b188a055ee6663f8d307e99b22c51200fee320))
### [1.3.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.3...v1.3.4) (2021-01-13)
### Bug Fixes
* `identifier` for `CssModule` ([#677](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/677)) ([117a97a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/117a97acaa5b37c5183b5b48264d7e524e8f5bc3))
### [1.3.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.2...v1.3.3) (2020-12-10)
### Bug Fixes
* serializing big strings in sourceMap ([#665](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/665)) ([f7a5e53](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/f7a5e5381ce1d2b822d49b688027d06efec2312d))
### [1.3.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.1...v1.3.2) (2020-12-04)
### Bug Fixes
* missing auxiliary assets ([#662](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/662)) ([f28c1e1](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/f28c1e115fb9aacbd87e3b1540adb7418a4cc375))
### [1.3.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.0...v1.3.1) (2020-11-12)
### Bug Fixes
* compatibility with asset modules ([#656](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/656)) ([bea1f4d](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/bea1f4d0c25abc6268b8076305e9879344ff1701))
## [1.3.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.2.1...v1.3.0) (2020-11-06)
### ⚠ POTENTIAL BREAKING CHANGE
Options are now validated according to stricter rules - no unknown additional properties. For example, if you have not removed the `hmr` option for the loader when migrating to `mini-css-extract-plugin@1`, you will get an error. Just remove them from your configuration(s). We did this because many developers started making these mistakes.
### Features
* added the `type` property for loading errors ([#651](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/651)) ([be9ddcb](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/be9ddcba7f4b216aa52dcd64a0e450a312b7156f))
### Bug Fixes
* schema ([#652](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/652)) ([4e4733d](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/4e4733dc10fd8a8ecda5b47421b390a479b826aa))
* serializing big strings ([#647](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/647)) ([022d945](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/022d9459a6f158166e700c11a02b9063154c96bc))
* source map url for devtool (only webpack@5) ([#650](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/650)) ([5889d43](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/5889d43bafe8613a29e3a8156f0b5052b6ad88b9))
### [1.2.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.2.0...v1.2.1) (2020-10-27)
### Bug Fixes
* onerror/onload memory leak ([#640](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/640)) ([2b6fcf2](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2b6fcf260b2fb13afe2abd052cff5dea184ef398))
## [1.2.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.2...v1.2.0) (2020-10-23)
### Features
* added the `linkType` option ([#634](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/634)) ([a89c0f9](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a89c0f982716d1093dbe6b12de47e4e8df1543f5))
### Bug Fixes
* compatibility with webpack@4 and webpack@5 for monorepos ([#638](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/638)) ([60c3eef](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/60c3eef936245183451d63f1e080ce990553078d))
### [1.1.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.0...v1.1.2) (2020-10-22)
### Bug Fixes
* compatibility with webpack@4 and webpack@5 for monorepos ([#636](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/636)) ([3413439](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/341343924d96f5d0076f27b98c96f9439bff6347))
* error when reloading async chunk ([#633](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/633)) ([89e7a0a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/89e7a0acf08f36711c916a4827ea6afff7028afb))
### [1.1.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.1.0...v1.1.1) (2020-10-20)
### Bug Fixes
* fix `onerror` message for async chunks ([#629](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/629)) ([883079e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/883079e02b9d400fab4e8a955604036a3be50c48))
## [1.1.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.0.0...v1.1.0) (2020-10-19)
### Features
* added the `attributes` option ([e8a2d5a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/e8a2d5a09ded967e0f4be145f1f52c1e5f7f6df1))
* added the `insert` option ([a5f17c4](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a5f17c48cbf0c198ebc955032d11593434ef2373))
### Bug Fixes
* ignore modules without identifier ([#627](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/627)) ([71a9ce9](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/71a9ce91b377fff892068b87445372fe1c2db142))
* remove `normalize-url` from deps ([#623](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/623)) ([9ae47e5](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/9ae47e51f198f2e0258d0e87d6e708e57c05bf86))
### [1.0.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.12.0...v1.0.0) (2020-10-09)
### BREAKING CHANGE
* minimum supported `Node.js` version is `10.13.0`
* the `esModule` option is `true` by default, you need to change `const locals = require('./styles.css')`/`require('./styles.css')` on `import locals from './styles.css'`/`import './styles.css''`
* the `moduleFilename` option was removed in favor the `filename` option
* the `hmr` option was removed, HMR will work automatically when `HotModuleReplacement` plugin used or `webpack-dev-server` with enabled the `hot` option
* the `reloadAll` was removed
### Features
- the `chunkFilename` option can be a function for webpack@5
### ⚠ NOTICE
To avoid problems between `mini-css-extract-plugin` and `style-loader` because of changing the `esModule` option to `true` by default we strongly recommend upgrading `style-loader` to `2.0.0` version.
### [0.12.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.3...v0.12.0) (2020-10-07)
### Features
* opt-in to transitive only side effects (webpack@5), no more empty JS chunks
### [0.11.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.2...v0.11.3) (2020-10-02)
### Bug Fixes
* better support for webpack 5 ([#595](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/595)) ([6e09a51](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6e09a51954aee1c8db904747e0b9bc42d14e7b47))
### [0.11.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.1...v0.11.2) (2020-09-12)
### Bug Fixes
* cache for webpack@5 ([6a27b30](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/6a27b30fea43d2d179d7df5deb260887d6b45ccc))
### [0.11.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.11.0...v0.11.1) (2020-09-08)
### Bug Fixes
* added cache serializer for webpack@5 ([#581](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/581)) ([d09693e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/d09693e7d50858c319a804736cf9609479140ad8))
### [0.11.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.10.0...v0.11.0) (2020-08-27)
### Features
* named export ([1ea4b7f](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/1ea4b7fe8305fcca7915d5c1dccd6041bab2c053))
### Bug Fixes
* compatibility with webpack@5
### [0.10.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.9.0...v0.10.0) (2020-08-10)
### Features
* schema validation ([#480](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/480)) ([b197757](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b197757e26af717a302485293a2b95bc0eb6cf71))
### Bug Fixes
* add semicolon to avoid `Uncaught TypeError` on Webpack v5 ([#561](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/561)) ([3974210](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/3974210ec820f47cf717cd0829d4e4e3879a518a))
* enforce esm ([#546](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/546)) ([b146549](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b1465491b1706e0f450cf69df4cf8176799907d1))
* partial compatibility with `webpack@5` ([#477](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/477)) ([903a56e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/903a56ea3fa08e173cd548d23089d0cee25bafea))
### [0.9.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.2...v0.9.0) (2019-12-20)
### Features
* new `esModule` option ([#475](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/475)) ([596e47a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/596e47a8aead53f9cc0e2b1e09a2c20e455e45c1))
### [0.8.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.1...v0.8.2) (2019-12-17)
### Bug Fixes
* context for dependencies ([#474](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/474)) ([0269860](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0269860adb0eaad477901188eea66693fedf7769))
### [0.8.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.8.0...v0.8.1) (2019-12-17)
### Bug Fixes
* use filename mutated after instantiation ([#430](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/430)) ([0bacfac](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0bacfac7ef4a06b4810fbc140875f7a038caa5bc))
* improve warning of conflict order ([#465](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/465)) ([357d073](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/357d073bf0259f2c44e613ad4dfcbcc8354e4be3))
* support ES module syntax ([#472](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/472)) ([2f72e1a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2f72e1aa267de23f121441714e88406f579e77b2))
## [0.8.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.7.0...v0.8.0) (2019-07-16)
### Features
* Add ignoreOrder option ([#422](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/422)) ([4ad3373](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/4ad3373))
## [0.7.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.6.0...v0.7.0) (2019-05-27)
### Bug Fixes
* do not attempt to reload unrequestable urls ([#378](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/378)) ([44d00ea](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/44d00ea))
* fix `publicPath` regression ([#384](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/384)) ([582ebfe](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/582ebfe))
* enable using plugin without defining options ([#393](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/393)) ([a7dee8c](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/a7dee8c))
* downgrading normalize-url ([#399](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/399)) ([0dafaf6](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/0dafaf6))
* hmr do not crash on link without href ([#400](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/400)) ([aa9b541](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/aa9b541))
* hmr reload with invalid link url ([#402](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/402)) ([30a19b0](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/30a19b0))
### Features
* add `moduleFilename` option ([#381](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/381)) ([13e9cbf](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/13e9cbf))
# [0.6.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.5.0...v0.6.0) (2019-04-10)
### Features
* added error code to chunk load Error ([#347](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/347)) ([b653641](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/b653641))
* adding hot module reloading ([#334](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/334)) ([4ed9c5a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/4ed9c5a))
* publicPath can be a function ([#373](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/373)) ([7b1425a](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/7b1425a))
# [0.5.0](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.5...v0.5.0) (2018-12-07)
### Features
* add crossOriginLoading option support ([#313](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/313)) ([ffb0d87](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/ffb0d87))
## [0.4.5](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.4...v0.4.5) (2018-11-21)
### Bug Fixes
* **index:** allow requesting failed async css files ([#292](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/292)) ([2eb0af5](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/2eb0af5))
## [0.4.4](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.3...v0.4.4) (2018-10-10)
### Bug Fixes
* **index:** assign empty `module.id` to prevent `contenthash` from changing unnecessarily ([#284](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/284)) ([d7946d0](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/d7946d0))
## [0.4.3](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.2...v0.4.3) (2018-09-18)
### Bug Fixes
* **loader:** pass `emitFile` to the child compilation (`loaderContext.emitFile`) ([#177](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/177)) ([18c066e](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/18c066e))
## [0.4.2](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.0...v0.4.2) (2018-08-21)
### Bug Fixes
* use correct order when multiple chunk groups are merged ([#246](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/246)) ([c3b363d](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/c3b363d))
## [0.4.1](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v0.4.0...v0.4.1) (2018-06-29)
### Bug Fixes
* CSS ordering with multiple entry points ([#130](https://github.com/webpack-contrib/mini-css-extract-plugin/issues/130)) ([79373eb](https://github.com/webpack-contrib/mini-css-extract-plugin/commit/79373eb))
# Change Log
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
x.x.x / --
==================
* Bug fix -
* Feature -
* Chore -
* Docs -
mini-css-extract-plugin-2.10.2/LICENSE 0000664 0000000 0000000 00000002057 15161222650 0017273 0 ustar 00root root 0000000 0000000 Copyright JS Foundation and other contributors
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
mini-css-extract-plugin-2.10.2/README.md 0000664 0000000 0000000 00000075674 15161222650 0017564 0 ustar 00root root 0000000 0000000
mini-css-extract-plugin
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![tests][tests]][tests-url]
[![coverage][cover]][cover-url]
[![discussion][discussion]][discussion-url]
[![size][size]][size-url]
# mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file for each JS file that contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v5 feature and requires webpack 5 to work.
Compared to the extract-text-webpack-plugin:
- Async loading
- No duplicate compilation (performance)
- Easier to use
- Specific to CSS
## Getting Started
To begin, you'll need to install `mini-css-extract-plugin`:
```console
npm install --save-dev mini-css-extract-plugin
```
or
```console
yarn add -D mini-css-extract-plugin
```
or
```console
pnpm add -D mini-css-extract-plugin
```
It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack/css-loader)
Then add the loader and the plugin to your `webpack` configuration. For example:
**style.css**
```css
body {
background: green;
}
```
**component.js**
```js
import "./style.css";
```
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
> [!WARNING]
>
> Note that if you import CSS from your webpack entrypoint or import styles in the [initial](https://webpack.js.org/concepts/under-the-hood/#chunks) chunk, `mini-css-extract-plugin` will not load this CSS into the page automatically. Please use [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) for automatic generation `link` tags or manually include a `` tag in your `index.html` file.
> [!WARNING]
>
> Source maps works only for `source-map`/`nosources-source-map`/`hidden-nosources-source-map`/`hidden-source-map` values because CSS only supports source maps with the `sourceMappingURL` comment (i.e. `//# sourceMappingURL=style.css.map`). If you need set `devtool` to another value you can enable source maps generation for extracted CSS using [`sourceMap: true`](https://github.com/webpack/css-loader#sourcemap) for `css-loader`.
## Options
### Plugin Options
- **[`filename`](#filename)**
- **[`chunkFilename`](#chunkFilename)**
- **[`ignoreOrder`](#ignoreOrder)**
- **[`insert`](#insert)**
- **[`attributes`](#attributes)**
- **[`linkType`](#linkType)**
- **[`runtime`](#runtime)**
- **[`experimentalUseImportModule`](#experimentalUseImportModule)**
#### `filename`
Type:
```ts
type filename =
| string
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
```
Default: `[name].css`
This option determines the name of each output CSS file.
Works like [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename)
#### `chunkFilename`
Type:
```ts
type chunkFilename =
| string
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
```
Default: `Based on filename`
> Specifying `chunkFilename` as a `function` is only available in webpack@5
This option determines the name of non-entry chunk files.
Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename)
#### `ignoreOrder`
Type:
```ts
type ignoreOrder = boolean;
```
Default: `false`
Remove Order Warnings.
See [examples](#remove-order-warnings) for more details.
#### `insert`
Type:
```ts
type insert = string | ((linkTag: HTMLLinkElement) => void);
```
Default: `document.head.appendChild(linkTag);`
Inserts the `link` tag at the given position for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks
> [!WARNING]
>
> Only applicable for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks.
By default, the `mini-css-extract-plugin` appends styles (`` elements) to `document.head` of the current `window`.
However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements insertion.
For example this is the case when you asynchronously load styles for an application that runs inside of an iframe.
In such cases `insert` can be configured to be a function or a custom selector.
If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement), make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
##### `string`
Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
A new `` element will be inserted after the found item.
**webpack.config.js**
```js
new MiniCssExtractPlugin({
insert: "#some-element",
});
```
A new `` tag will be inserted after the element with the ID `some-element`.
##### `function`
Allows to override default behavior and insert styles at any position.
> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
>
> > ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
**webpack.config.js**
```js
new MiniCssExtractPlugin({
insert(linkTag) {
const reference = document.querySelector("#some-element");
if (reference) {
reference.parentNode.insertBefore(linkTag, reference);
}
},
});
```
A new `` tag will be inserted before the element with the ID `some-element`.
#### `attributes`
Type:
```ts
type attributes = Record;
```
Default: `{}`
> [!WARNING]
>
> Only applies to [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks.
If defined, the `mini-css-extract-plugin` will attach given attributes with their values on `` element.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
attributes: {
id: "target",
"data-target": "example",
},
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
> [!NOTE]
>
> It's only applied to dynamically loaded CSS chunks.
> If you want to modify `` attributes inside HTML file, please use [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
#### `linkType`
Type:
```ts
type linkType = string | boolean;
```
Default: `text/css`
This option allows loading asynchronous chunks with a custom link type, such as ``.
##### `string`
Possible values: `text/css`
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
linkType: "text/css",
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
##### `boolean`
`false` disables the link `type` attribute entirely.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
linkType: false,
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
#### `runtime`
Type:
```ts
type runtime = boolean;
```
Default: `true`
Allows to enable/disable the runtime generation.
CSS will be still extracted and can be used for a custom loading methods.
For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retrieve them then use your own runtime code to download assets when needed.
`false` to skip.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
runtime: false,
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
#### `experimentalUseImportModule`
Type:
```ts
type experimentalUseImportModule = boolean;
```
Default: `undefined`
Enabled by default if not explicitly enabled (i.e. `true` and `false` allow you to explicitly control this option) and new API is available (at least webpack `5.52.0` is required).
Boolean values are available since version `5.33.2`, but you need to enable `experiments.executeModule` (not required from webpack `5.52.0`).
Use a new webpack API to execute modules instead of child compilers, significantly improving performance and memory usage.
When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the CSS execution.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// You don't need this for `>= 5.52.0` due to the fact that this is enabled by default
// Required only for `>= 5.33.2 & <= 5.52.0`
// Not available/unsafe for `<= 5.33.2`
experimentalUseImportModule: true,
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
```
### Loader Options
- **[`publicPath`](#publicPath)**
- **[`emit`](#emit)**
- **[`esModule`](#esModule)**
- **[`defaultExport`](#defaultExport)**
#### `publicPath`
Type:
```ts
type publicPath =
| string
| ((resourcePath: string, rootContext: string) => string);
```
Default: the `publicPath` in `webpackOptions.output`
Specifies a custom public path for the external resources like images, files, etc inside `CSS`.
Works like [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath)
##### `string`
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "/public/path/to/",
},
},
"css-loader",
],
},
],
},
};
```
##### `function`
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) =>
`${path.relative(path.dirname(resourcePath), context)}/`,
},
},
"css-loader",
],
},
],
},
};
```
#### `emit`
Type:
```ts
type emit = boolean;
```
Default: `true`
If `true`, emits a file (writes a file to the filesystem).
If `false`, the plugin will extract the CSS but **will not** emit the file.
It is often useful to disable this option for server-side packages.
#### `esModule`
Type:
```ts
type esModule = boolean;
```
Default: `true`
By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax.
There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
You can enable a CommonJS syntax using:
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
"css-loader",
],
},
],
},
};
```
#### `defaultExport`
Type:
```ts
type defaultExport = boolean;
```
Default: `false`
> [!NOTE]
>
> This option will work only when you set `namedExport` to `true` in `css-loader`
By default, `mini-css-extract-plugin` generates JS modules based on the `esModule` and `namedExport` options in `css-loader`.
Using the `esModule` and `namedExport` options will allow you to better optimize your code.
If you set `esModule: true` and `namedExport: true` for `css-loader` `mini-css-extract-plugin` will generate **only** a named export.
Our official recommendation is to use only named export for better future compatibility.
But for some applications, it is not easy to quickly rewrite the code from the default export to a named export.
In case you need both default and named exports, you can enable this option:
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
defaultExport: true,
},
},
{
loader: "css-loader",
options: {
esModule: true,
modules: {
namedExport: true,
},
},
},
],
},
],
},
};
```
## Examples
### Recommended
For `production` builds, it is recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on. This can be achieved by using the `mini-css-extract-plugin`, because it creates separate css files.
For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack/style-loader), because it injects CSS into the DOM using multiple and works faster.
> Important: Do not use `style-loader` and `mini-css-extract-plugin` together.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
module: {
rules: [
{
// If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
// type: "javascript/auto",
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
plugins: [devMode ? [] : [new MiniCssExtractPlugin()]].flat(),
};
```
### Minimal example
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
"css-loader",
],
},
],
},
};
```
### Named export for CSS Modules
> ⚠ Names of locals are converted to `camelCase`.
> ⚠ It is not allowed to use JavaScript reserved words in CSS class names.
> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
**styles.css**
```css
.foo-baz {
color: red;
}
.bar {
color: blue;
}
```
**index.js**
```js
import { bar, fooBaz } from "./styles.css";
console.log(fooBaz, bar);
```
You can enable a ES module named export using:
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {
esModule: true,
modules: {
namedExport: true,
localIdentName: "foo__[name]__[local]",
},
},
},
],
},
],
},
};
```
### The `publicPath` option as function
You can specify `publicPath` as a function to dynamically determine the public path based on each resource’s location relative to the project root or context.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) =>
// publicPath is the relative path of the resource to the context
// e.g. for ./css/admin/main.css the publicPath will be ../../
// while for ./css/main.css the publicPath will be ../
`${path.relative(path.dirname(resourcePath), context)}/`,
},
},
"css-loader",
],
},
],
},
};
```
### Advanced configuration example
This plugin should not be used with `style-loader` in the loaders chain.
Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.
(Loaders options left out for clarity, adapt accordingly to your needs.)
You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
`webpack-dev-server` enables / disables HMR using `hot` option.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const devMode = process.env.NODE_ENV !== "production";
const plugins = [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? "[name].css" : "[name].[contenthash].css",
chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
}),
];
if (devMode) {
// only enable hot in development
plugins.push(new webpack.HotModuleReplacementPlugin());
}
module.exports = {
plugins,
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
};
```
### Hot Module Reloading (HMR)
> [!NOTE]
>
> HMR is automatically supported in webpack 5. No need to configure it. Skip the following:
The `mini-css-extract-plugin` supports hot reloading of actual CSS files in development.
Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.
Below is an example configuration of mini-css for HMR use with CSS modules.
You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
`webpack-dev-server` enables / disables HMR using `hot` option.
**webpack.config.js**
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const plugins = [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? "[name].css" : "[name].[contenthash].css",
chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
}),
];
if (devMode) {
// only enable hot in development
plugins.push(new webpack.HotModuleReplacementPlugin());
}
module.exports = {
plugins,
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
"css-loader",
],
},
],
},
};
```
### Minimizing For Production
To minify the output, use a plugin like [css-minimizer-webpack-plugin](https://github.com/webpack/css-minimizer-webpack-plugin).
**webpack.config.js**
```js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`).
// Uncomment the next line o keep JS minimizers and add CSS minimizer:
// `...`,
new CssMinimizerPlugin(),
],
},
};
```
- By default, CSS minimization runs in production mode.
- If you want to run it also in development set the `optimization.minimize` option to `true`.
### Using preloaded or inlined CSS
The runtime code detects already added CSS via `` or `
