DEV Community

Cover image for Webpack Academy #2: Plugins
Code Oz
Code Oz

Posted on • Edited on

Webpack Academy #2: Plugins

#webpack #webdev #javascript #css

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!

Top comments (0)

Read next

madsstoumann profile image

Any web developers or designers in Lanzarote? Iā€™m up for a chat and a coffee next week (PDC or Arrecife) ā˜•ļø

Mads Stoumann -

sharathchandark profile image

Build Live Code Editor Clone with HTML, CSS and JavaScript

sharathchandark -

ricardocaselati profile image

Types: char and boolean

Ricardo Caselati -

pawandeore profile image

Introduction to Git: A Powerful Version Control System

pawan deore -