DEV Community

Cover image for Webpack Academy #2: Plugins
CodeOz
CodeOz

Posted on • Updated on

Webpack Academy #2: Plugins

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"
  },
Enter fullscreen mode Exit fullscreen mode

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

    plugins: [
        new MiniCssExtractPlugin({
            // Name output by extract
            filename: "style.css",
        }),
    ],
Enter fullscreen mode Exit fullscreen mode

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

const cssLoaders = env === "prod" ?
    [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ] : [
        'style-loader',
        'css-loader'
    ]
Enter fullscreen mode Exit fullscreen mode

💡 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 !

    <head>
        <link rel="stylesheet" href="dist/styles.css">
    </head>
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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 and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

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

And you can mark 🔖 this article!

Discussion (0)