Docs: Add more details about webpack config

packages/scripts/README.md

@@ -517,7 +517,7 @@ For more e2e debugging tips check out the [Puppeteer debugging docs](https://dev
 
 In general, this package should be used with the set of recommended config files. While it’s possible to override every single config file provided, if you have to do it, it means that your use case is far more complicated than anticipated. If that happens, it would be better to avoid using the whole abstraction layer and set up your project with full control over tooling used.
 
-### Webpack config
+### Working with build scripts
 
 The `build` and `start` commands use [webpack](https://webpack.js.org/) behind the scenes. webpack is a tool that helps you transform your code into something else. For example: it can take code written in ESNext and output ES5 compatible code that is minified for production.
 
@@ -527,17 +527,74 @@ The `build` and `start` commands use [webpack](https://webpack.js.org/) behind t
 
 * [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js`
 * [Output](https://webpack.js.org/configuration/output): `build/index.js`
-* [Plugins](https://webpack.js.org/configuration/plugins): The webpack plugin provided by
-[`@wordpress/dependency-extraction-webpack-plugin`](/packages/dependency-extraction-webpack-plugin/README.md) is used
-with the default configuration to ensure that WordPress provided scripts are not included in the
-built bundle.
+* [Loaders](https://webpack.js.org/loaders/):
+  * [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) allows transpiling JavaScript files using Babel and webpack.
+  * [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack) and [`url-loader`](https://webpack.js.org/loaders/url-loader/) makes it possible to handle SVG files in JavaScript code.
+  * [`css-loader`](https://webpack.js.org/loaders/css-loader/) chained with [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) and [sass-loader](https://webpack.js.org/loaders/sass-loader/) let webpack processing CSS, SASS or SCSS files referenced in JavaScript files and extract into CSS files with [`MiniCssExtractPlugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/).
+* [Plugins](https://webpack.js.org/configuration/plugins) (among others):
+  * [`MiniCssExtractPlugin`](https://webpack.js.org/plugins/mini-css-extract-plugin/) extracts CSS into separate files. It creates a CSS file per JavaScript entry point which contains CSS.
+  * [`@wordpress/dependency-extraction-webpack-plugin`](/packages/dependency-extraction-webpack-plugin/README.md) is used with the default configuration to ensure that WordPress provided scripts are not included in the built bundle.
+
+#### Using CSS
+
+_Example:_
+
+```scss
+// index.scss
+$body-color: red;
+
+.wp-block-my-block {
+    color: $body-color;
+}
+```
+
+```css
+/* style.css */
+.wp-block-my-block {
+    background-color: black;
+}
+```
+
+```js
+// index.js
+import './index.scss';
+import './style.css';
+```
+
+When you run the build using the default command `wp-scripts build` (also applies to `start`) in addition to JavaScript file `index.js` generated in the `dist` folder, you should see two more files:
+1. `index.css` – in general, the majority of JavaScript code written for the block, it's going to be rendered in the block editor. Therefore all imported files are bundled into one chunk named after the entry point that defaults to `index.js`, and thus the file created becomes `index.css`.
+2. `style.css` – imported `style.css` file(s) (applies to SASS and SCSS extensions) get bundled into one `style.css` file that is meant to be used both on the front-end and in the editor.
+
+You can also have multiple entry points as described in the docs for the script:
+```bash
+wp-scripts start entry-one.js entry-two.js --output-path=custom
+```
+
+If you do so, then CSS files generated will follow the names of the entry points: `entry-one.css` and `entry-two.css`.
+
+You can have only one entry point and name it differently if you will. The chances that you would call an entry point `style.js` is close to zero, but possible and therefore, it needs to be discouraged.
+
+#### Using SVG
+
+_Example:_
+
+```js
+import starUrl, { ReactComponent as Star } from './star.svg';
+
+const App = () => (
+  <div>
+    <img src={ starUrl } alt="star" />
+    <Star />
+  </div>
+);
+```
 
 #### Provide your own webpack config
 
 Should there be any situation where you want to provide your own webpack config, you can do so. The `build` and `start` commands will use your provided file when:
 
 * the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`.
-* there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`).
+* there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your project (at the same level as `package.json`).
 
 ##### Extending the webpack config