File tree Expand file tree Collapse file tree 1 file changed +78
-0
lines changed Expand file tree Collapse file tree 1 file changed +78
-0
lines changed Original file line number Diff line number Diff 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
204282For long term caching use ` filename: "[contenthash].css" ` . Optionally add ` [name] ` .
You can’t perform that action at this time.
0 commit comments