Skip to content

Commit 6b01c64

Browse files
authored
docs: include file loader method of extracting CSS as separate file in README.md (#1080)
1 parent 78c0590 commit 6b01c64

File tree

1 file changed

+64
-3
lines changed

1 file changed

+64
-3
lines changed

README.md

+64-3
Original file line numberDiff line numberDiff line change
@@ -798,10 +798,9 @@ module.exports = {
798798

799799
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.
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

840901
Enables/Disables generation of source maps.

0 commit comments

Comments
 (0)