File tree Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Original file line number Diff line number Diff line change @@ -76,6 +76,47 @@ The `href` of the `<link>` tag has to match the URL that will be used for loadin
7676The ` data-href `  attribute can be used for ` <link> `  and ` <style> `  too.
7777When inlining CSS ` data-href `  must be used.
7878
79+ #### Extracting all CSS in a single file  
80+ 
81+ Similar to what [ extract-text-webpack-plugin] ( https://github.com/webpack-contrib/extract-text-webpack-plugin )  does, the CSS
82+ can be extracted in one CSS file using ` optimization.splitChunks.cacheGroups ` .
83+ 
84+ ** webpack.config.js** 
85+ 
86+ ``` js 
87+ const  MiniCssExtractPlugin  =  require (" mini-css-extract-plugin"  );
88+ module .exports  =  {
89+   optimization:  {
90+     splitChunks:  {
91+       cacheGroups:  {
92+         styles:  {
93+           name:  ' styles'  ,
94+           test:  / \. css$ /  ,
95+           chunks:  ' all'  ,
96+           enforce:  true 
97+         }
98+       }
99+     }
100+   },
101+   plugins:  [
102+     new  MiniCssExtractPlugin ({
103+       filename:  " [name].css"  ,
104+     })
105+   ],
106+   module:  {
107+     rules:  [
108+       {
109+         test:  / \. css$ /  ,
110+         use:  [
111+           MiniCssExtractPlugin .loader ,
112+           " css-loader" 
113+         ]
114+       }
115+     ]
116+   }
117+ }
118+ ``` 
119+ 
79120<h2  align =" center " >Maintainers</h2 >
80121
81122<table >
    
 
   
 
     
   
   
          
     
  
    
     
 
    
      
     
 
     
    You can’t perform that action at this time.
  
 
    
  
     
    
      
        
     
 
       
      
     
   
 
    
    
  
 
  
 
     
    
0 commit comments