@@ -798,10 +798,9 @@ module.exports = {
798798
799799For production builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
800800
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:
802802
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 )
805804
806805** webpack.config.js**
807806
@@ -835,6 +834,68 @@ module.exports = {
835834};
836835```
837836
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+
838899### Source maps
839900
840901Enables/Disables generation of source maps.
0 commit comments