# Cheat sheet for webpack's config rules

Webpack's config rules may seem complicated, but it really isn't! This is a simple "cheatsheet" that you can use for webpack's config. 

Here is where you place the rules:
```diff
 module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
  },
  mode: "development",
  module: {
+ rules: [],
  },
};
```
Your config does **not** have to look like the one above, I was just showing you where the rules go (in the module.rules array) and how it looks

### JavaScript and JSON
Nothing is really needed for these two languages as webpack natively supports them

### CSS/SCSS
You do need a few packages to import CSS and/or SCSS into webpack, but it works like a charm.

Install the packages needed with this command:
```sh
npm install postcss-loader style-loader sass-loader  css-loader --save
```
Then, insert the following rule in `webpack.config.js` under module -> rules:
```js
{
    test: /\.(scss|css)$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
```

### Images
Yes, you can use images in webpack. You will need to use the [Assets modules rule](https://webpack.js.org/guides/asset-modules/) functions.

Insert the following rule in `webpack.config.js` under module -> rules:
```js
{
    test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
    type: 'asset/resource'
},
```

### Fonts and SVG files
For this one, you need to use something inline assets

Insert the following rule in `webpack.config.js` under module -> rules:
```js
{
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: 'asset/inline',
},
```

### Babel
Babel is a compiler for the next generation JavaScript, today. You can basically use newer JavaScript in older browsers like Internet Explorer.

Install the packages needed with this command:
```sh
npm i @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-class-properties --save
```

Then, insert the following rule in `webpack.config.js` under module -> rules:
```js
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
},
```

I actually made this cheat sheet for myself, but I decided to share it with everyone! Enjoy!