Open ParSal123 opened 2 years ago
Pipeline is simple CSS
-> JS
-> Apply styles to DOM
css-loader
track url()
/import
and convert it to import ... from ...
, also if you use CSS modules your classes will be hashed and exported from generated JS files, css-loader
returns array of styles like ['module-name.css', '.class { color: red }', 'source-map']
(there are more fields, just simplified for example)style-loader
just get exported array and apply them to DOM + add code for hot module reloading, so you don't reload page when you changes stylesIn other hard - mini-css-extract-plugin
gets array and create CSS files, so you can use <link>
, also if you have async CSS plugin generates JS code for loading them
So if you need another logic than apply styles to DOM you can use own loader, but it is rare or specific usage
Pipeline is simple
CSS
->JS
->Apply styles to DOM
css-loader
trackurl()
/import
and convert it toimport ... from ...
, also if you use CSS modules your classes will be hashed and exported from generated JS files,css-loader
returns array of styles like['module-name.css', '.class { color: red }', 'source-map']
(there are more fields, just simplified for example)style-loader
just get exported array and apply them to DOM + add code for hot module reloading, so you don't reload page when you changes stylesIn other hard -
mini-css-extract-plugin
gets array and create CSS files, so you can use<link>
, also if you have async CSS plugin generates JS code for loading them
Thank you, Still, I think if this could be added to the docs somewhere (like a separate "How it works" section) along with a simple example it would be nice and more understandable.
@alexander-akait Is this one added? If so then this can be closed. If not, I can help update the website of webpack later this/next month.
@nyngwang Yeah, feel free to send a PR to our docs, still not documented
Documentation Is:
Please Explain in Detail...
Hi, In the docs, it reads
but it doesn't say anything about alternatives. I'm trying to learn how this whole webpack pipeline fits together. From what I can tell (based on this, bunch of stackoverflow questions: 1, 2, 3, 4 and probably more)
css-loader
takes the css files (after everything else like sass, postcss, etc have done their work and right beforestyle-loader
) and outputs js which are then given tostyle-loader
. Finally, based on configuration, the output is then javascript which injects the style in DOM. What EXACTLY isstyle-loader
expecting as input? I tried to input css files and it didn't work.I'm asking this for my own curiosity, but if someone were to actually write another
css-loader
to work withstyle-loader
, there is no documentation for it.Your Proposal for Changes
Write documentation!