diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index a63facd3..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,35 +0,0 @@
-{
- "presets": [
- [
- "env",
- {
- "useBuiltIns": true,
- "targets": {
- "node": "6.9.0"
- },
- "exclude": [
- "transform-async-to-generator",
- "transform-regenerator"
- ]
- }
- ]
- ],
- "plugins": [
- [
- "transform-object-rest-spread",
- {
- "useBuiltIns": true
- }
- ]
- ],
- "env": {
- "test": {
- "presets": [
- "env"
- ],
- "plugins": [
- "transform-object-rest-spread"
- ]
- }
- }
-}
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8ea8b93c..f99240b3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -29,7 +29,7 @@ canary_tests: &canary_tests
command: npm i --no-save webpack@next
- run:
name: Run Test.
- command: if [[ $(compver --name webpack --gte next --lt latest) < 1 ]] ; then printf "Next is older than Latest - Skipping Canary Suite"; else npm run ci:test; fi
+ command: if [[ $(compver --name webpack --gte next --lt latest) < 1 ]] ; then printf "Next is older than Latest - Skipping Canary Suite"; else npm run ci:test || true; fi
version: 2
jobs:
@@ -100,9 +100,9 @@ jobs:
name: Submit coverage data to codecov.
command: bash <(curl -s https://codecov.io/bash)
when: on_success
- node6-canary:
+ node8-canary:
docker:
- - image: webpackcontrib/circleci-node10:latest
+ - image: webpackcontrib/circleci-node8:latest
<<: *canary_tests
workflows:
@@ -136,10 +136,10 @@ workflows:
filters:
tags:
only: /.*/
- - node6-canary:
+ - node8-canary:
requires:
- analysis
- node6-latest
filters:
tags:
- only: /.*/
+ only: /.*/
\ No newline at end of file
diff --git a/.editorconfig b/.editorconfig
index 45946eaa..9f89f364 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,5 +9,5 @@ insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
-insert_final_newline = false
+insert_final_newline = true
trim_trailing_whitespace = false
diff --git a/.eslintignore b/.eslintignore
index 6df4bd28..e600f2af 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,5 @@
/node_modules
/dist
-/test/cases
+/test/cases/*/expected
/test/js
/test/manual
diff --git a/.eslintrc.js b/.eslintrc.js
index d2627f59..575edd22 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,13 +1,9 @@
module.exports = {
root: true,
+ parser: 'babel-eslint',
plugins: ['prettier'],
extends: ['@webpack-contrib/eslint-config-webpack'],
rules: {
- 'prettier/prettier': [
- 'error',
- { singleQuote: true, trailingComma: 'es5', arrowParens: 'always' },
- ],
- 'class-methods-use-this': 'off',
- 'no-undefined': 'off',
+ 'prettier/prettier': ['error'],
},
};
diff --git a/.gitattributes b/.gitattributes
index 9d37df8f..c76f8a99 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -2,3 +2,4 @@ package-lock.json -diff
* text=auto
test/cases/* eol=lf
bin/* eol=lf
+yarn.lock -diff
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index ddbd568d..a3cedd77 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -3,5 +3,4 @@
@webpack-contrib/org-maintainers
# Add repository specific users / groups
-# below here for libs that are not maintained by the org.
-@sokra
+# below here for libs that are not maintained by the org.
\ No newline at end of file
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 5e6a74bf..044b0af9 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -1,21 +1,21 @@
-## Contributing in @webpack-contrib
+# Contributing in @webpack-contrib
-We'd always love contributions to further improve the webpack / webpack-contrib ecosystem!
+We'd always love contributions to further improve the webpack / webpack-contrib ecosystem!
Here are the guidelines we'd like you to follow:
-* [Questions and Problems](#question)
-* [Issues and Bugs](#issue)
-* [Feature Requests](#feature)
-* [Pull Request Submission Guidelines](#submit-pr)
-* [Commit Message Conventions](#commit)
+- [Questions and Problems](#question)
+- [Issues and Bugs](#issue)
+- [Feature Requests](#feature)
+- [Pull Request Submission Guidelines](#submit-pr)
+- [Commit Message Conventions](#commit)
-### Got a Question or Problem?
+## Got a Question or Problem?
-Please submit support requests and questions to StackOverflow using the tag [[webpack]](http://stackoverflow.com/tags/webpack).
-StackOverflow is better suited for this kind of support though you may also inquire in [Webpack Gitter](https://gitter.im/webpack/webpack).
+Please submit support requests and questions to StackOverflow using the tag [[webpack]](http://stackoverflow.com/tags/webpack).
+StackOverflow is better suited for this kind of support though you may also inquire in [Webpack Gitter](https://gitter.im/webpack/webpack).
The issue tracker is for bug reports and feature discussions.
-### Found an Issue or Bug?
+## Found an Issue or Bug?
Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available.
@@ -31,13 +31,13 @@ We will be insisting on a minimal reproduce scenario in order to save maintainer
Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you we are going to close an issue that doesn't have enough info to be reproduced.
-### Feature Requests?
+## Feature Requests?
-You can *request* a new feature by creating an issue on Github.
+You can _request_ a new feature by creating an issue on Github.
-If you would like to *implement* a new feature, please submit an issue with a proposal for your work `first`, to be sure that particular makes sense for the project.
+If you would like to _implement_ a new feature, please submit an issue with a proposal for your work `first`, to be sure that particular makes sense for the project.
-### Pull Request Submission Guidelines
+## Pull Request Submission Guidelines
Before you submit your Pull Request (PR) consider the following guidelines:
@@ -46,9 +46,9 @@ Before you submit your Pull Request (PR) consider the following guidelines:
- Fill out our `Pull Request Template`. Your pull request will not be considered if it is ignored.
- Please sign the `Contributor License Agreement (CLA)` when a pull request is opened. We cannot accept your pull request without this. Make sure you sign with the primary email address associated with your local / github account.
-### Webpack Contrib Commit Conventions
+## Webpack Contrib Commit Conventions
-Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
+Each commit message consists of a **header**, a **body** and a **footer**. The header has a special
format that includes a **type**, a **scope** and a **subject**:
```
@@ -66,48 +66,56 @@ to read on GitHub as well as in various git tools.
The footer should contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages/) if any.
-Examples:
+Examples:
+
```
docs(readme): update install instructions
```
+
```
fix: refer to the `entrypoint` instead of the first `module`
```
-#### Revert
-If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit.
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of the reverted commit.
In the body it should say: `This reverts commit .`, where the hash is the SHA of the commit being reverted.
-#### Type
+### Type
+
Must be one of the following:
-* **build**: Changes that affect the build system or external dependencies (example scopes: babel, npm)
-* **chore**: Changes that fall outside of build / docs that do not effect source code (example scopes: package, defaults)
-* **ci**: Changes to our CI configuration files and scripts (example scopes: circleci, travis)
-* **docs**: Documentation only changes (example scopes: readme, changelog)
-* **feat**: A new feature
-* **fix**: A bug fix
-* **perf**: A code change that improves performance
-* **refactor**: A code change that neither fixes a bug nor adds a feature
-* **revert**: Used when reverting a committed change
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons)
-* **test**: Addition of or updates to Jest tests
-
-#### Scope
+- **build**: Changes that affect the build system or external dependencies (example scopes: babel, npm)
+- **chore**: Changes that fall outside of build / docs that do not effect source code (example scopes: package, defaults)
+- **ci**: Changes to our CI configuration files and scripts (example scopes: circleci, travis)
+- **docs**: Documentation only changes (example scopes: readme, changelog)
+- **feat**: A new feature
+- **fix**: A bug fix
+- **perf**: A code change that improves performance
+- **refactor**: A code change that neither fixes a bug nor adds a feature
+- **revert**: Used when reverting a committed change
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons)
+- **test**: Addition of or updates to Jest tests
+
+### Scope
+
The scope is subjective & depends on the `type` see above. A good example would be a change to a particular class / module.
-#### Subject
+### Subject
+
The subject contains a succinct description of the change:
-* use the imperative, present tense: "change" not "changed" nor "changes"
-* don't capitalize the first letter
-* no dot (.) at the end
+- use the imperative, present tense: "change" not "changed" nor "changes"
+- don't capitalize the first letter
+- no dot (.) at the end
+
+### Body
-#### Body
Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
The body should include the motivation for the change and contrast this with previous behavior.
-#### Footer
+### Footer
+
The footer should contain any information about **Breaking Changes** and is also the place to
reference GitHub issues that this commit **Closes**.
@@ -116,9 +124,29 @@ reference GitHub issues that this commit **Closes**.
Example
```
-BREAKING CHANGE: Updates to `Chunk.mapModules`.
+BREAKING CHANGE: Updates to `Chunk.mapModules`.
This release is not backwards compatible with `Webpack 2.x` due to breaking changes in webpack/webpack#4764
Migration: see webpack/webpack#5225
```
+
+## Testing Your Pull Request
+
+You may have the need to test your changes in a real-world project or dependent
+module. Thankfully, Github provides a means to do this. Add a dependency to the
+`package.json` for such a project as follows:
+
+```json
+{
+ "devDependencies": {
+ "${package}": "webpack-contrib/${package}#{id}/head"
+ }
+}
+```
+
+Where `{id}` is the # ID of your Pull Request.
+
+## Thanks
+
+For your interest, time, understanding, and for following this simple guide.
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 4601e185..f68cbd3e 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,7 +1,16 @@
diff --git a/.github/ISSUE_TEMPLATE/BUG.md b/.github/ISSUE_TEMPLATE/BUG.md
new file mode 100644
index 00000000..e08f56ab
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/BUG.md
@@ -0,0 +1,51 @@
+---
+name: 🐛 Bug Report
+about: Something went awry and you'd like to tell us about it.
+
+---
+
+
+
+* Operating System:
+* Node Version:
+* NPM Version:
+* webpack Version:
+* mini-css-extract-plugin Version:
+
+### Expected Behavior
+
+
+
+### Actual Behavior
+
+
+
+### Code
+
+```js
+ // webpack.config.js
+ // If your bitchin' code blocks are over 20 lines, please paste a link to a gist
+ // (https://gist.github.com).
+```
+
+```js
+ // additional code, HEY YO remove this block if you don't need it
+```
+
+### How Do We Reproduce?
+
+
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/DOCS.md b/.github/ISSUE_TEMPLATE/DOCS.md
new file mode 100644
index 00000000..900ef500
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/DOCS.md
@@ -0,0 +1,30 @@
+---
+name: 📚 Documentation
+about: Are the docs lacking or missing something? Do they need some new 🔥 hotness? Tell us here.
+
+---
+
+
+
+Documentation Is:
+
+
+
+- [ ] Missing
+- [ ] Needed
+- [ ] Confusing
+- [ ] Not Sure?
+
+### Please Explain in Detail...
+
+
+### Your Proposal for Changes
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/FEATURE.md b/.github/ISSUE_TEMPLATE/FEATURE.md
new file mode 100644
index 00000000..2b93063d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/FEATURE.md
@@ -0,0 +1,28 @@
+---
+name: ✨ Feature Request
+about: Suggest an idea for this project
+
+---
+
+
+
+* Operating System:
+* Node Version:
+* NPM Version:
+* webpack Version:
+* mini-css-extract-plugin Version:
+
+### Feature Proposal
+
+
+
+### Feature Use Case
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/MODIFICATION.md b/.github/ISSUE_TEMPLATE/MODIFICATION.md
new file mode 100644
index 00000000..978881fe
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/MODIFICATION.md
@@ -0,0 +1,33 @@
+---
+name: 🔧 Modification Request
+about: Would you like something work differently? Have an alternative approach? This is the template for you.
+
+---
+
+
+
+* Operating System:
+* Node Version:
+* NPM Version:
+* webpack Version:
+* mini-css-extract-plugin Version:
+
+
+### Expected Behavior / Situation
+
+
+
+### Actual Behavior / Situation
+
+
+
+### Modification Proposal
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/SUPPORT.md b/.github/ISSUE_TEMPLATE/SUPPORT.md
new file mode 100644
index 00000000..e27ffab7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/SUPPORT.md
@@ -0,0 +1,9 @@
+---
+name: 🆘 Support, Help, and Advice
+about: 👉🏽 Need support, help, or advice? Don't open an issue! Head to StackOverflow or https://gitter.im/webpack/webpack.
+
+---
+
+Hey there! If you need support, help, or advice then this is not the place to ask.
+Please visit [StackOverflow](https://stackoverflow.com/questions/tagged/webpack)
+or [the Webpack Gitter](https://gitter.im/webpack/webpack) instead.
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index cb2a818c..bc4f57a7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ Thumbs.db
*.sublime-project
*.sublime-workspace
.idea
+*.iml
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index e537c8ad..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "singleQuote": true,
- "trailingComma": "es5",
- "arrowParens": "always"
-}
diff --git a/README.md b/README.md
index a2022c2a..04945b20 100644
--- a/README.md
+++ b/README.md
@@ -19,11 +19,10 @@ It builds on top of a new webpack v4 feature (module types) and requires webpack
Compared to the extract-text-webpack-plugin:
-* Async loading
-* No duplicate compilation (performance)
-* Easier to use
-* Specific to CSS
-
+- Async loading
+- No duplicate compilation (performance)
+- Easier to use
+- Specific to CSS
Install
@@ -47,15 +46,15 @@ Specifies a custom public path for the target file(s).
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+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"
- })
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
],
module: {
rules: [
@@ -68,15 +67,15 @@ module.exports = {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '../',
- hmr: process.env.NODE_ENV === 'development'
- }
+ hmr: process.env.NODE_ENV === 'development',
+ },
},
- "css-loader"
- ]
- }
- ]
- }
-}
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
```
#### `publicPath` function example
@@ -84,15 +83,15 @@ module.exports = {
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+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"
- })
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
],
module: {
rules: [
@@ -106,16 +105,16 @@ module.exports = {
// 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 ../
- return path.relative(path.dirname(resourcePath), context) + '/'
+ return path.relative(path.dirname(resourcePath), context) + '/';
},
- }
+ },
},
- "css-loader"
- ]
- }
- ]
- }
-}
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
```
#### Advanced configuration example
@@ -126,12 +125,11 @@ Here is an example to have both HMR in `development` and your styles extracted i
(Loaders options left out for clarity, adapt accordingly to your needs.)
-
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const devMode = process.env.NODE_ENV !== 'production'
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
plugins: [
@@ -140,50 +138,47 @@ module.exports = {
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
- })
+ }),
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- hmr: process.env.NODE_ENV === 'development'
- }
- },
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ hmr: process.env.NODE_ENV === 'development',
+ },
+ },
'css-loader',
'postcss-loader',
'sass-loader',
],
- }
- ]
- }
-}
+ },
+ ],
+ },
+};
```
#### Hot Module Reloading (HMR)
extract-mini-css-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.
-
-While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
-
-
+While we attempt to hmr css-modules. It is not easy to perform when code-splitting with custom chunk names. `reloadAll` is an option that should only be enabled if HMR isn't working correctly. The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+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"
- })
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
],
module: {
rules: [
@@ -196,53 +191,46 @@ module.exports = {
// only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// if hmr does not work, this is a forceful method.
- reloadAll: true
- }
+ reloadAll: true,
+ },
},
- "css-loader"
- ]
- }
- ]
- }
-}
+ 'css-loader',
+ ],
+ },
+ ],
+ },
+};
```
-
### Minimizing For Production
-While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
+To minify the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin). Setting `optimization.minimizer` overrides the defaults provided by webpack, so make sure to also specify a JS minimizer:
**webpack.config.js**
```js
-const TerserJSPlugin = require("terser-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const TerserJSPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
- minimizer: [
- new TerserJSPlugin({}),
- new OptimizeCSSAssetsPlugin({})
- ]
+ minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
- filename: "[name].css",
- chunkFilename: "[id].css"
- })
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ }),
],
module: {
rules: [
{
test: /\.css$/,
- use: [
- MiniCssExtractPlugin.loader,
- "css-loader"
- ]
- }
- ]
- }
-}
+ use: [MiniCssExtractPlugin.loader, 'css-loader'],
+ },
+ ],
+ },
+};
```
### Features
@@ -263,7 +251,7 @@ can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
**webpack.config.js**
```js
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
optimization: {
splitChunks: {
@@ -272,28 +260,25 @@ module.exports = {
name: 'styles',
test: /\.css$/,
chunks: 'all',
- enforce: true
- }
- }
- }
+ enforce: true,
+ },
+ },
+ },
},
plugins: [
new MiniCssExtractPlugin({
- filename: "[name].css",
- })
+ filename: '[name].css',
+ }),
],
module: {
rules: [
{
test: /\.css$/,
- use: [
- MiniCssExtractPlugin.loader,
- "css-loader"
- ]
- }
- ]
- }
-}
+ use: [MiniCssExtractPlugin.loader, 'css-loader'],
+ },
+ ],
+ },
+};
```
#### Extracting CSS based on entry
@@ -304,7 +289,7 @@ ExtractTextPlugin.
```javascript
const path = require('path');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
if (m.issuer) {
@@ -319,43 +304,42 @@ function recursiveIssuer(m) {
module.exports = {
entry: {
foo: path.resolve(__dirname, 'src/foo'),
- bar: path.resolve(__dirname, 'src/bar')
+ bar: path.resolve(__dirname, 'src/bar'),
},
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
- test: (m,c,entry = 'foo') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+ test: (m, c, entry = 'foo') =>
+ m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
- enforce: true
+ enforce: true,
},
barStyles: {
name: 'bar',
- test: (m,c,entry = 'bar') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+ test: (m, c, entry = 'bar') =>
+ m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
- enforce: true
- }
- }
- }
+ enforce: true,
+ },
+ },
+ },
},
plugins: [
new MiniCssExtractPlugin({
- filename: "[name].css",
- })
+ filename: '[name].css',
+ }),
],
module: {
rules: [
{
test: /\.css$/,
- use: [
- MiniCssExtractPlugin.loader,
- "css-loader"
- ]
- }
- ]
- }
-}
+ use: [MiniCssExtractPlugin.loader, 'css-loader'],
+ },
+ ],
+ },
+};
```
#### Long Term Caching
@@ -373,42 +357,19 @@ If you'd like to extract the media queries from the extracted CSS (so mobile use
- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)
- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)
-
-