File tree 1 file changed +41
-0
lines changed
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
76
76
The ` data-href ` attribute can be used for ` <link> ` and ` <style> ` too.
77
77
When inlining CSS ` data-href ` must be used.
78
78
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
+
79
120
<h2 align =" center " >Maintainers</h2 >
80
121
81
122
<table >
You can’t perform that action at this time.
0 commit comments