Skip to content

Commit 41347f7

Browse files
verydannyevilebottnawi
authored andcommitted
docs: add CSS extract based on entry (#121)
* Added CSS extract based on entry * woops,typo * fixed rebase artifact
1 parent 2709413 commit 41347f7

File tree

1 file changed

+78
-0
lines changed

1 file changed

+78
-0
lines changed

README.md

+78
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,84 @@ module.exports = {
199199
}
200200
```
201201

202+
#### Extracting CSS based on entry
203+
204+
You may also extract the CSS based on the webpack entry name. This is especially useful if you import routes dynamically
205+
but want to keep your CSS bundled according to entry. This also prevents the CSS duplication issue one had with the
206+
ExtractTextPlugin.
207+
208+
```javascript
209+
const path = require('path');
210+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
211+
212+
function recursiveIssuer(m) {
213+
if (m.issuer) {
214+
return recursiveIssuer(m.issuer);
215+
} else if (m.name) {
216+
return m.name;
217+
} else {
218+
return false;
219+
}
220+
}
221+
222+
module.exports = {
223+
entry: {
224+
foo: path.resolve(__dirname, 'src/foo'),
225+
bar: path.resolve(__dirname, 'src/bar')
226+
},
227+
optimization: {
228+
splitChunks: {
229+
cacheGroups: {
230+
fooStyles: {
231+
name: 'foo',
232+
test: (m,c,entry = 'foo') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
233+
chunks: 'all',
234+
enforce: true
235+
},
236+
barStyles: {
237+
name: 'bar',
238+
test: (m,c,entry = 'bar') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
239+
chunks: 'all',
240+
enforce: true
241+
}
242+
}
243+
}
244+
},
245+
plugins: [
246+
new MiniCssExtractPlugin({
247+
filename: "[name].css",
248+
})
249+
],
250+
module: {
251+
rules: [
252+
{
253+
test: /\.css$/,
254+
use: [
255+
MiniCssExtractPlugin.loader,
256+
"css-loader"
257+
]
258+
}
259+
]
260+
}
261+
}
262+
```
263+
264+
<h2 align="center">Maintainers</h2>
265+
266+
<table>
267+
<tbody>
268+
<tr>
269+
<td align="center">
270+
<a href="https://github.com/sokra">
271+
<img width="150" height="150" src="https://github.com/sokra.png?size=150">
272+
</br>
273+
Tobias Koppers
274+
</a>
275+
</td>
276+
</tr>
277+
<tbody>
278+
</table>
279+
202280
#### Long Term Caching
203281

204282
For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.

0 commit comments

Comments
 (0)