File tree 1 file changed +78
-0
lines changed
1 file changed +78
-0
lines changed Original file line number Diff line number Diff line change @@ -199,6 +199,84 @@ module.exports = {
199
199
}
200
200
```
201
201
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
+
202
280
#### Long Term Caching
203
281
204
282
For long term caching use ` filename: "[contenthash].css" ` . Optionally add ` [name] ` .
You can’t perform that action at this time.
0 commit comments