diff --git a/README.md b/README.md index 2d2ae6c3..1803f42c 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,84 @@ module.exports = { } ``` +#### Extracting CSS based on entry + +You may also extract the CSS based on the webpack entry name. This is especially useful if you import routes dynamically +but want to keep your CSS bundled according to entry. This also prevents the CSS duplication issue one had with the +ExtractTextPlugin. + +```javascript +const path = require('path'); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); + +function recursiveIssuer(m) { + if (m.issuer) { + return recursiveIssuer(m.issuer); + } else if (m.name) { + return m.name; + } else { + return false; + } +} + +module.exports = { + entry: { + foo: path.resolve(__dirname, 'src/foo'), + bar: path.resolve(__dirname, 'src/bar') + }, + optimization: { + splitChunks: { + cacheGroups: { + fooStyles: { + name: 'foo', + test: (m,c,entry = 'foo') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, + chunks: 'all', + enforce: true + }, + barStyles: { + name: 'bar', + test: (m,c,entry = 'bar') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry, + chunks: 'all', + enforce: true + } + } + } + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + }) + ], + module: { + rules: [ + { + test: /\.css$/, + use: [ + MiniCssExtractPlugin.loader, + "css-loader" + ] + } + ] + } +} +``` + +
Maintainers
+ +
+
+
+
+
+
+ + Tobias Koppers +
+
+
+
+
+ #### Long Term Caching For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
+
+ Tobias Koppers
+
+
+
+ Tobias Koppers
+
+