@@ -798,10 +798,9 @@ module.exports = {
798
798
799
799
For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
800
800
801
- There are two possibilities to extract a style sheet from the bundle:
801
+ There are four possibilities to extract a style sheet from the bundle:
802
802
803
- - [ mini-css-extract-plugin] ( https://github.com/webpack-contrib/mini-css-extract-plugin )
804
- - [ extract-loader] ( https://github.com/peerigon/extract-loader ) (simpler, but specialized on the css-loader's output)
803
+ #### 1. [ mini-css-extract-plugin] ( https://github.com/webpack-contrib/mini-css-extract-plugin )
805
804
806
805
** webpack.config.js**
807
806
@@ -835,6 +834,68 @@ module.exports = {
835
834
};
836
835
```
837
836
837
+ #### 2. [ Asset Modules] ( https://webpack.js.org/guides/asset-modules/ )
838
+
839
+ ** webpack.config.js**
840
+
841
+ ``` js
842
+ module .exports = {
843
+ entry: [__dirname + " /src/scss/app.scss" ],
844
+ module: {
845
+ rules: [
846
+ {
847
+ test: / \. js$ / ,
848
+ exclude: / node_modules/ ,
849
+ use: [],
850
+ },
851
+ {
852
+ test: / \. scss$ / ,
853
+ exclude: / node_modules/ ,
854
+ type: " asset/resource" ,
855
+ generator: {
856
+ filename: " bundle.css" ,
857
+ },
858
+ use: [" sass-loader" ],
859
+ },
860
+ ],
861
+ },
862
+ };
863
+ ```
864
+
865
+ #### 3. [ extract-loader] ( https://github.com/peerigon/extract-loader ) (simpler, but specialized on the css-loader's output)
866
+
867
+ #### 4. [ file-loader] ( https://github.com/webpack-contrib/file-loader ) (deprecated--should only be used in Webpack v4)
868
+
869
+ ** webpack.config.js**
870
+
871
+ ``` js
872
+ module .exports = {
873
+ entry: [__dirname + " /src/scss/app.scss" ],
874
+ module: {
875
+ rules: [
876
+ {
877
+ test: / \. js$ / ,
878
+ exclude: / node_modules/ ,
879
+ use: [],
880
+ },
881
+ {
882
+ test: / \. scss$ / ,
883
+ exclude: / node_modules/ ,
884
+ use: [
885
+ {
886
+ loader: " file-loader" ,
887
+ options: { outputPath: " css/" , name: " [name].min.css" },
888
+ },
889
+ " sass-loader" ,
890
+ ],
891
+ },
892
+ ],
893
+ },
894
+ };
895
+ ```
896
+
897
+ (source: https://stackoverflow.com/a/60029923/2969615 )
898
+
838
899
### Source maps
839
900
840
901
Enables/Disables generation of source maps.
0 commit comments