Webpack Academy #2: Plugins
Tags: webpack, webdev, javascript, css
Published: 2021-08-11 17:52:18

From the last post, we learn how and why using loader !

In this post we will learn a new ressource coming from webpack, named ... **Plugin** !

### What is this ?

Definition from webpack :
> They also serve the purpose of doing anything else that a loader cannot do

In general we use plugin to transform or modifying things in your project, you will understand below 👇

### Extract CSS from JS

In prod mode we need to break CSS from JS file, if you need an explication on why, check this link -> https://stackoverflow.com/questions/43417739/why-extract-css

 So to add this behavior in our project, we can use plugin like `mini-css-extract-plugin`. And as we need to use this plugin only in prod mode, we need to use env variable in our config !

Thanks to `cross-env` package we can pass env variable in command line, so we can modify the build command like this 

```
  "scripts": {
    "build": "cross-env --env.NODE_ENV=prod webpack --config webpack.config.js"
  },
```

We can get the `NODE_ENV` value in our config file.

After this we need to make two thing:

Add the plugin in the config

```javascript
    plugins: [
        new MiniCssExtractPlugin({
            // Name output by extract
            filename: "style.css",
        }),
    ],
```

And after we need to use the plugin in the loader chaining for css file, depending on the current env variable !

```javascript
const cssLoaders = env === "prod" ?
    [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ] : [
        'style-loader',
        'css-loader'
    ]
```

💡 *Note: We remove `style-loader` when prod mode since we don't need to implement our style in the dom since we are putting the css file output directly in `<style>` balise in our HTML afterward*

So from now if we build file for prod, we will have two files in our `dir` output, `js` and `css`.

Don't forget to add style in your html file !

```html
    <head>
        <link rel="stylesheet" href="dist/styles.css">
    </head>
```

### Another plugin 

Another good plugin is `clean-webpack-plugin`, its purpose is to clean all old/useless output file in `/dist` folder 🗂.

Add in plugins list 📝

```
new CleanWebpackPlugin()
```

From now each time you **build** new changes, this plugin will remove old/useless file !

### Conclusion

So now you now what is plugin in **webpack** ! You have a lot of plugin to discover !

Code here -> https://github.com/Code-Oz/webpack-academy/tree/d51480ddbf63cf1c0066311d27f1777a5683a823

I hope you want to learn more about webpack in my academy !

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!