I'm also new to Webpack, but the gist I've gotten from it is this: Webpack's goal is to make it easy to compile your development files into simple build products through a pipeline that you define in its configuration. By default, Webpack will read in your .CSS files and then use JS to compile and inject them directly into the build product.
This specifics of this injection leads to a big, crowded <style> tag, which can be ugly for production environments. The extractor plugin used in the article above pulls that <style> tag out and builds a discrete .CSS file instead, passing that into your eventual build products like one would normally do for a stylesheet.
The advantage of this process is that you can use a mix of compiled and uncompiled Sass (or your favorite CSS preprocessor), any frameworks (Bootstrap, for example, is written in Sass/SCSS), and plain CSS when you're styling your site. Webpack handles the nitty-gritty of compiling it into one solid piece of CSS, and then injects or extracts it according to your config.
Webpack also has some neat tricks for minimizing your build products and optimizing their structure, to attempt to help your site be as performant as possible, though mileage may vary on that front.
All these features make it a very versatile, powerful tool!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm also new to Webpack, but the gist I've gotten from it is this: Webpack's goal is to make it easy to compile your development files into simple build products through a pipeline that you define in its configuration. By default, Webpack will read in your .CSS files and then use JS to compile and inject them directly into the build product.
This specifics of this injection leads to a big, crowded
<style>tag, which can be ugly for production environments. The extractor plugin used in the article above pulls that<style>tag out and builds a discrete .CSS file instead, passing that into your eventual build products like one would normally do for a stylesheet.The advantage of this process is that you can use a mix of compiled and uncompiled Sass (or your favorite CSS preprocessor), any frameworks (Bootstrap, for example, is written in Sass/SCSS), and plain CSS when you're styling your site. Webpack handles the nitty-gritty of compiling it into one solid piece of CSS, and then injects or extracts it according to your config.
Webpack also has some neat tricks for minimizing your build products and optimizing their structure, to attempt to help your site be as performant as possible, though mileage may vary on that front.
All these features make it a very versatile, powerful tool!