DEV Community: Bruno Moura

[Databases] - Update consistency

Bruno Moura — Sat, 25 Nov 2023 01:02:38 +0000

Prelude

A centralized relational database tries to show a robust data consistency and concurrency control.

But in a world where chasing to improve performance is a constant, so when we are dealing with databases clusters, issues like update consistency, reading consistency,replicatation consistency, eventual consistency,conditional update, etc comes to hand.

Let's talk about the many ways that consitency may mean.

The issue with "Update consistency"

In this situation we have to deal with write-write conflict, means two clients trying to update the same data at the same time.

When there is a centralized database, a single node, that receive all writes, then we are trying to maintain consistency confronting concurrency.

Scenery like this are described as optimistic and pessimistic.

Keeping consistency in a optimistic way

In optimistic scenario, the node accepts all writes, and after try to solve the conflicts.

An approach very common is the "conditional update", means, test the data before write.

Let's say, along with the data that will be updated, a field called "version" is used to test the update. Every update that occurs the version number is incremented.

In a context that conflicts happen rarely, this approach works fine.

In other hand, in a context that conflicts happen many times, many data can be without updates and will be lost.

Keeping consistency in a pessimistic way

The premise here is "no conflict will happen".

No write will happen until the current write finishes its update.

By the strategy nature, performance is not a priority here.

This strategy, many times, leads to deadlocks conflicts.

By the end, when we are building a software, there is not the right answer, the answer is depends what the business need.

What characteristics your software must have?

Security and responsiveness are fundamental when dealing with concurrent programming.

[Javascript] - [Part 1] - Prototype

Bruno Moura — Thu, 23 Nov 2023 00:22:29 +0000

"prototype" is called "a reference to another object". From where? From any javascript object.

So, prototype is a parent from your custom object.

If none parent is set, then the parent is the object "Object".

And this parent points to primitive type "null".

const b = { b: 1 }

b // the custom object
b.__proto__ // the parent "Object"
b.__proto__.__proto__ // null

__proto__ gets an object prototype from the object itself!

Just it. Here we have what is called "prototype chain".

But, be careful, as we said before, every object point to the same parent "Object".

const custom1 = {c1:1}
const custom2 = {c2:2}

custom1.__proto__.myNewProp = 2

console.log(custom2.myNewProp) // prints: 2

Good luck! ;)

[Javascript] - Data dictionary

Bruno Moura — Wed, 15 Nov 2023 14:37:37 +0000

Object.create() // TypeError: Object prototype may only be an Object or null

Object.create(null) //[Object: null prototype] {}

Object.create({}) // {}

The second one is a data dictionary, because it is an object without a parent.

It creates an object that has an empty [[Prototype]] binding (also known as null), and therefore this object cannot delegate anywhere.

As an object of this type does not have a prototype chain, the instanceof operator has nothing to check, so it will always return false.

These special empty [[Prototype]] objects are often called "dictionaries" as they are typically only used to store data in properties, most of the time because they have no surprise effect coming from any delegated property/function in the chain [[Prototype]], and therefore are only used for data storage.

The instanceof operator tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object. The return value is a boolean value.

Constructors, in javaScript, it is more appropriate to say that, a "constructor" is any function called with a "new" keyword before it. Functions are not constructors, but function calls are "constructor calls" if and only if "new" is used.

[Javascript] - Arrays

Bruno Moura — Thu, 09 Nov 2023 01:58:19 +0000

An object, {}, can look like an array, e.g.

const x = {}
x[0] = 1 // works
console.log(x[0]) // works
console.log(x.0) // doesn't work
const [first] = x // doesn't work, non-iterable object

For example, arrays are by default converted(auto-coercion allowed, means signal “==“ ) to strings by simply joining all the values with commas (,) between them. You might think that two arrays with the same content are equal ==, when in fact they are not:

var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c; // true
b == c; // true
a == b; // false

dotenv and typescript

Bruno Moura — Sat, 15 Oct 2022 09:14:18 +0000

When we are developing our app, it is very important to put things in its right place.

Here, I'm talking about "typescript" with "dotenv".

They are two powerful tool that increases considerably the development speed.

In order we can do that, we can do something like this,

.env file must exists in root application path.

package.json

"scripts": {
...
    "dev": "ts-node-dev --transpile-only -r dotenv/config -- src/main/server.ts",
...
  },

That way, we don´t "dirty" our code when we have to load local env variables for our app.

An overview about Microservices

Bruno Moura — Thu, 27 Aug 2020 10:07:07 +0000

The microservice's core is performance, is all about performance.

A strategy that born from the experience market, the need of scale, to serve more and more requests.

A point that have to be clear is when we increasing the positive points, what we doing is increasing the negative ones as well. So the success of a microservices' architecture is a well defined strategy to deal with the all complexity that born with that type of approach.

The microservice's strategy is not only about manage the software's life cycle but how to organize your business in order to reflect it in your teams as well.

Microservices are small

Two weeks is a good start point when we think about re-built an entire microservice.

This is where things start to get interesting...

Let's think about the meaning 'small enough',

Software is about automate routines.

A way that we do the things cheaper, structured, organized, patterned, etc.

Software is located in the middle, not the end of your business.

If we don't have a context to use it, the software there isn't a meaning.

So, we can say here that 'small enough' depending on your business, your context.

How small can be the smallest routine of your business?

The response is a routine(service) that do only one thing but do it very well and can be re-built within around two weeks.

Autonomous

Microservice is totally separate entity, there is no dependency to deploy it and is a good practice think about deploy every microservice into a new machine(container?).

All that isolation results on more complexity, but nowadays there are many technologies that help us to mitigate it.

All communication is made via network calls to enforce low coupling.

When we are talking about autonomy it means that the service need to be change without concern if the client or another service will be affected. We need to think about what our service will expose and what will be hidden. Because these thing decrease the microservice autonomy.

What we are seeking when creating a new microservice is...

Can you make a change to a service and deploy it by itself without changing anything else?

Technology Heterogeneity

With microservices result in a bunch independent services from which we can take advantages, like using different technologies' stacks that lead us to solve different problems.

If there is a part of our systems that is facing performance problems, for instance, we can select a better one technology's stack to solve this problem. That way we are totally concern about to solve the problem and not about to solve the problem limited to follow a pre-established development standard.

And, of course, everything is a trade-off. All that flexibility comes with overhead.

Different stacks don't reuse the same library, for instance. Once we have different platforms.

Some companies(Netflix and Twitter for example), mostly use Java Virtual Machine as a platform, as they have a very good understanding of the reliability and performance of that system.

Again, If we can rewrite a microservice in two weeks, we may well mitigate the risks of embracing new technology.

Resilience

Monolithic world

In a monolithic architecture, only one service/system is responsible by many tasks), if it fails, everything the system is responsible stops working(API, UI, Batch routines, etc).

The way to mitigate a general fail is running multiples instances of that system.

Microservice world

Provides us the ability to deal with a fail, isolate it and allow the rest of system keep working. Every microservice is responsible for only one task.

Scaling

Monolithic world

No matter if only one part of the system that is more requested, the entire system has to be scaled(two or more instances). It means much more computational resources to increase system's availability.

Microservice world

When a service have to be scaled, the other parts of a system know nothing about that. Only one functionality will have your performance increased and the rest of the system continuous working normally.

Deployment

If an application is composed of many parts, when we have to deploy, it means that we will deploy just a piece, a limited part of the system. We don't have to deal with the risk of deploy the entire system. In case of problem with that small part, only that part will be unavailable instead of entire system. Once the risk is lower, the incidence of deploys increases.

Composability

SOA(Service Oriented Architecture) bring us the reuse of functionalities. Next to that, Microservices allow us consuming the functionalities in different ways for different purposes.

As the companies evolves, the architecture has to be flexible in the way to support the business needs, to do that we need to build things in different ways.

Optimizing for Replaceability

Change the entire microservice is a task that is not involve a big headache at all, because microservices are small by your nature.

Who never worked by a company with a big old system, a legacy one, that is the company's heart, that no one wants touch it?

And if no one wants to touch that system why hasn't that system been changed? We know why, because it is vital to the company and there is a high risk involved.

SOA - Service Oriented Architecture

Are routines(services) that communicate each other through network calls rather than method calls within only one process.

SOA emerged as an alternative to monolithic systems.

SOA promote the reuse of services. Where the service has a well designed interface based on a concise semantic.

No matter where you are in the company, a service can be used by different areas or even, once outside the company, can be selling as company's resource in order to open new business.

In my opinion, what are doing in practice are simple webservices. Taking the data from one node to another over network. What I means is a Service(note the upper case 'S') is an entity, there is more than transport data one point to another. When we reach the usability characteristic of the Service, it transcending over the company. The Service transform the company's business.

Summary

In that article, I'm introducing the microservice approach and bringing more information to help when decided to implement it.

All I'm talking here is based from book,
Building Microservices: Designing Fine-Grained Systems by Sam Newman

Cover Picture credits: Photo by Clint Adair on Unsplash

React, how to use useState() method

Bruno Moura — Wed, 17 Jun 2020 18:31:37 +0000

When I started the use with React, a thing that bodereds me was the method useState().

So I understood that we have two types of storage when working with React,

Memory storage and;
Component storage,

And finally, with that vision, I managed to absorbed the knowledge about the use of useState() method.

After that, I built a gif to turn my words clear,

Summing up, you can change values without useState(), but what you're changing is the value in browser's memory, not in the React Component. To do that you have to use useState().

That's all folks!

Why am'I using the webpack tool?

Bruno Moura — Wed, 10 Jun 2020 18:02:05 +0000

Everyone today is using webpack tool. When we enter the webpack website the first information that we see is,

But, let me step back and ask something… Do I really know what that means?

So, doing a superficial analysis I can understand that we have many assets from same type and then webpack compile into only one, e.g. there are the files a.js, b.js, c.js and then after perform webpack we have only “abc.js”, or “main.js”, whatever. And that’s it. It is what I’am getting from this image.

Webpack is a tool that so many people and companies using today, to understand the reason of its popularity, we have to expose the problem that webpack solves and then we finally can bring light to the darkness.

Let’s begin with “What is HTTP Protocol”?

The word protocol means, the system of rules that produces a expected behavior. According to this, make sense that there is a well defined protocol to exchange information through internet, once any type of data is supported, so a patterned one fits well.

HTTP messages is pure text but a well structured one, becoming it in a protocol.

The HTTP specification can be find here and is held by Internet Engineering Task Force.

Http Server

In short, is a software that serves static assets using HTTP protocol. Is a implementation of the HTTP specification.

Here I will use the npm module http-server, but you are free to choose any other implementation, e.g apache http server, to replicate what is exposed here in this article.

Let’s install the http server,

$ npm i -g http-server

And now start the server,

> ~$ http-server dist/
< Starting up http-server, serving /dist
< Available on:
< http://127.0.0.1:8080
< http://192.168.0.25:8080

in order to server everything under folder dist/ and port 8080. The entry point is dist/index.html.

You can change this behavior, but I will not cover it here ok? :)

Let’s test our http server using a tool called curl, a command line tool,

$ curl http://localhost:8080 -v
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.58.0
> Accept: \*/\*
> 
< HTTP/1.1 200 OK
< server: ecstatic-3.3.2
< cache-control: max-age=3600
< last-modified: Tue, 21 Apr 2020 10:38:02 GMT
< etag: W/"3674320-600-2020-04-21T10:38:02.508Z"
< content-length: 600
< content-type: text/html; charset=UTF-8
< Date: Tue, 21 Apr 2020 10:38:19 GMT
< Connection: keep-alive
< 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <link rel="icon" href="http://localhost:8080/favicon.ico?v=2" /> -->
    <meta charset="UTF-8">
    <link rel="stylesheet" href="table/position.css">
    <link rel="stylesheet" href="table/color.css">
    <link rel="stylesheet" href="table/layout.css">
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
</body>
</html>

Notice that, with curl, only one file is downloaded, the index.html.

Everything that starts with ‘>’ we are sending and everything that starts with ‘<’ we are receiving from the http server, i.e. request and response respectively.

The HTTP Request always will look like that, some header can be added or removed, but the structure will be always that way.

Using a browser client

Let’s make the same request on Google Chrome. Notice the client(browser) request many files to the server in order to display the complete html page.

Some tags into html file, e.g. <script>, <link>, etc, make a new request to the server, and that is the reason in which that we see many request besides that we did.

Notice, when we open the chrome developer tools, in network tab is allowed to see files being downloaded in order to present the page that we requested.

Each file is a entirely new request for the server, note the http headers,

And requests takes time to do their job done,

When we type “localhost:8080” into browser toolbar we are requesting a information. The browser know how to deal with HTML language and when it finds a resource that needed by file HTML, the browser make a new request in order to mount the graphic view.

And what about performance? Is the page loading fast enough?

This characteristic is called non-functional requirement, meaning that what limits we have to design, or build, our application. No matter if your site is beautiful and use the latest technologies, if it doesn’t do the things fast enough then we won’t have satisfied users, i.e. users happy with our brand, users are buying in our site, returning to it and speaking well about it as well.

Based on what has been shown so far, what the first thing that we get think in order to get a better performance?

...

Decrease the size of files that will be downloaded by the client.

Minimizing Resources

Minification is the process of removing unnecessary or unnecessary data without affecting the way resources are processed by the browser.

When we write the files, .html for instance, we need do it in a way that we, or any other person, is able to understand and maintain the code. All the comments and indentations is for us humans, not for computers.

Let’s see an example a code structured and commented,

 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <link rel="icon" href="http://localhost:8080/favicon.ico?v=2" /> -->
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="table/position.css">
    <link rel="stylesheet" type="text/css" href="table/color.css">
    <link rel="stylesheet" type="text/css" href="table/layout.css">
    
    <!-- importing jquery -->
    <script src="jquery-3.5.0.js"></script>
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./main.js"></script>
</body>
</html>

That way we can understand the code, so it is possible to fix a possible bug or make an improvement.

How was shown above, the browser understand it as well and processes the html file with success.

One point to notice is, a file formatted that way have a size,

Now we’ll minify that same file in which we’ll be deleting comments and indentation, I will use the tool willpeavy.com to minify the assests,

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="table/position.css"> <link rel="stylesheet" type="text/css" href="table/color.css"> <link rel="stylesheet" type="text/css" href="table/layout.css"> <script src="jquery-3.5.0.js"></script> <title>Hello World</title></head><body> <div id="app"></div><script type="module" src="./main.js"></script></body></html>

The browser continues understand and processing the html file,

Resulting in a new size,

Following that reasoning line, we can do more. So let’s minify the .js and CSSs files as well.

The .js assets we have 2322,6 bytes,

That minified we have 1615,5 bytes,

CSSs assets we have tree of them that summed 323 bytes,

When each is minified we have 104 bytes,

And the browser continues to understand and processes the files successfully,

But three CSSs files? Why not only one? This would result in only one request and consequently, less time for the client receive all assets by the server. Let’s put all CSSs contents in one file and called it bundle.css,

table{background-color: aqua;}table, th, td{border: 1px solid black; padding: 10px;}table{margin: 0 auto;}

As we create a new asset, we need to modify our index.html in order it find that new asset and load. We minify the index.html, so it’s a little more hard to alter that, but we are pros, we’ll get it!

We can revert the minification to a formatted file and then alter or we can alter the file minified as well, whatever, but we need alter it.

Once altered the index.html to point the right path to the new asset the browser continues rendering the page,

Let’s create another new asset, bundle.js, and put all content of .js files in it,

To do that we will have to deal with some hassles in order to get merge all files in only one and don’t forget that we need modify our index.html again, but we’ll get it! go go go!

And the application continues to work,

And now? What about the time the performance? When we look at the dev tools is possible to see the decrease of size of files and, consequently, the load page time as well.

At the footer of each image there are some informations that means,

requests: requests made by the client to the server

transferred: bytes transferred over network

resources: bytes loaded by the page

Finish: time to load all assets and show the page

DOMContentLoaded: time to load only the DOM(HTML)

Load: time to load the DOM and its dependencies

Looking at the informations above, is easy to see that application now is spending less time to load, means that we get a better performance.

But the only constant is change…

And how about now? After all changes we made to get a better performance, how can we get continuous changing things and formatting all the code to reach a better performance? The natural trend the applications is grow, that means more assets for minify and bundling. We won’t be able to deal with because in any moment a simple change would be result in so many time to implement. And if, nevertheless, do we decided use a new tecnology? We will have to deal with that as well.

Webpack to the rescue!

As we just saw, before webpack we had to deal with all these things. We had to know the every detail of our application like file dependencies each other, if a file is being really used, etc.

Webpack is able to bundle any static resource. You are free to build a any tupe of loader.

Just to make sure that we are in the same point, let’s do a very simple usage of webpack with the previously application introduced.

Out of the box, webpack bundle only javascript files.
It searches for index.js into ./src and put the new generated asset, main.js, into /dist. Let’s see an example.

Our structure project is,

Within the folder withwebpack, firstly we need rename the file main.js to index.js in order webpack get its job done,

$ mv src/main.js src/index.js

After, we will init a node project and install the two modules needed by webpack,

$ npm init -y && npm i webpack webpack-cli --save-dev

Three new artifacts will appeared,

And now, run webpack,

$ npx webpack

And that’s it. The output will be within the /dist.

That way we get keep our structure organized and we don’t need to deal with by ourselves all minification and bundling hassles and sure, we gain a better performance.

When we open the main.js, we can see a lot of javascript code. Analyzing the first part, we can see how webpack solves the transpilation, translation/compilation, in order to fit for the older browsers’ compabilities.

In the last part we find our javascript code, slightly altered but not its functionality, in order to fits in the generated bundle by webpack. Let’s see how it turned out,

function(e){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);class n{constructor(){this._field=""}tr(e){return this._field=`${e}`,this}create(){return this._field}}class i{constructor(){this._field=""}td(e){return this._field=`${e}`,this}create(){return this._field}}class o{constructor(){this._field=""}th(e){return this._field=`${e}`,this}create(){return this._field}}let u=new class{constructor(e,t){this._rows=[];let r="";e.map(e=>{r+=(new o).th(e).create()}),this._rows.push((new n).tr(r).create()),t.map(e=>{let t="";Object.keys(e).map(r=>t+=(new i).td(e[r]).create()),this._rows.push((new n).tr(t).create())})}create(){return`

\n ${this._rows.join("")}\n

`}}(["Name","Age"],[{name:"Bruno",age:33},{name:"Daniela",age:32}]).create();document.querySelector("#app").innerHTML=u}]);

Our code starts around when the word class appears for the first time. Here we have only javascript code.

And the CSSs?

As I said before, webpack is a resource’s bundler and we just need teach him to bundle a resource type(loader) and what resource(file) it’ll bundle.

In order to bundle the CSS files, we must install a new loader,

$ npm i css-loader --save-dev

Always we need a alike behavior from “out of the box”, webpack requires a configuration. We get that using the file webpack.config.js, so let create it,

const path = require('path');

module.exports = {
    entry: [
        './src/index.js',
        './src/table/color.css',
        './src/table/position.css',
        './src/table/layout.css',
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            
            {
                test: /\.css$/,
                use: [ 'css-loader', ],
            }
        ]
    }
}

The entry node means the start point that webpack will create its dependency graph. I configured the index.js as well because we need it to build the table within html file and the three css files that exists in the project, because there isn’t dependency between them.

Actually, in real world, I think that isn’t used, at least I have never seen. Later, I will show how to use css files with import reserved word within a javascript file.

The module node define how each module will be treated. Here I defined that every file .css will be transpiled with css-loader, means that teaching to webpack how to deal with css’ particularities and put it into generated bundle, just it, the css won’t be applied to any file. When we run webpack and start the http server, the result is our table without style,

But the css is contained within the bundle.js,

So that we can inject the css into the DOM we need install another loader, style-loader.

$ npm i style-loader --save-dev

Configuring it in webpack.config.js,

const path = require('path');

module.exports = {
    entry: [
        './src/index.js',
        './src/table/color.css',
        './src/table/position.css',
        './src/table/layout.css',
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader', ],
            }
        ]
    }
}

Pay atention the loaders’ order. They are performed from right to left, thus the css-loader will be run first and the style-loader will be the next, i.e. the CSSs will be translated to be then will be injected within the html.

Restarting the server,

$ http-server dist/
Starting up http-server, serving dist/
Available on:
  http://127.0.0.1:8080
  http://192.168.0.13:8080
Hit CTRL-C to stop the server

Refreshing the page,

And there it is!

But let’s get better the configuration in webpack.config.js file, removing all three css entries,

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader', ],
            }
        ]
    }
}

And importing them into Table.js file,

import Row from './Row.js';
import Column from './Column.js';
import Header from './Header.js';

import color from './color.css';
import position from './position.css';
import layout from './layout.css';

export default class Table {
    constructor(tableHeader, tableData){
        this._rows = [];
        
        let headersRow = '';
        tableHeader.map( header => {
            headersRow += new Header().th(header).create();
        });
        this._rows.push(new Row().tr(headersRow).create());

        tableData.map(data => {
            let dataRow = '';
            Object.keys(data).map( field => dataRow += new Column().td(data[field]).create());
            this._rows.push( new Row().tr(dataRow).create() );
        });
    }

    create(){
        return `<table>
            ${this._rows.join('')}
        </table>`;
    }
}

Running webpack again and restaring the server, the result is the same before,

Minify CSSs file

In order to extract the css’s code from js file and put it in a totally new file, we’ll use the plugin mini-css-extract-plugin,

Install it,

$ npm i mini-css-extract-plugin --save-dev

About the Plugins, while a loader teach webpack how to deal with a specific file type, plugin do things like minify, remove code’s comments and spaces, etc.

Let’s to alter our webpack.config.js,


const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [
        new MiniCssExtractPlugin(),
    ],
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [

            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            }
        ]
    }
}

And when we run webpack again, the result is a new ./dist/main.css file bundling the all three css files,

/* 
 * file: color.css 
 *
 * Sets the table's colors 
 */
table {
    background-color: aqua;
};
/* 
 * file: position.css 
 *
 * Sets the table's position on a screen 
 */
table {
    margin: 0 auto;
};
/* 
 * file: layout.css 
 *
 * Sets the table's layout 
 */
table, th, td {
    border: 1px solid black;
    padding: 10px;
};

Now we’ll minify and remove the comments, let’s install another plugin,

$ npm i optimize-css-assets-webpack-plugin --save-dev

Modifying the webpack.config.js,

const path = require('path');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [        
        new MiniCssExtractPlugin(),
        new OptimizeCSSAssetsPlugin({
            cssProcessorPluginOptions: {
                discardComments: { removeAll: true },
            },
        }),
    ],
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [

            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            }
        ]
    }
}

Running,

$ npx webpack

And we get the ./dist/main.css minified and without comments,

table,td,th{border:1px solid #000;padding:10px}table{background-color:#0ff;margin:0 auto}

And again, the application continue to work,

The style is gone, once we ask to webpack to generate a new file, so it have to be requested by the html page as well, however we didn’t do that.

Adding the link tag into our index.html,

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="main.css">
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="bundle.js"></script>
</body>
</html>

Refreshing the html page,

So if we create a new asset, means that every time we have to deal with it? We’ll need to put it manually into index.html?

Index.html with all its dependencies auto-generated

Installing html-webpack-plugin simplifies our life because the all assets needed by html will be referenced by webpack into index.html. Let’s install it,

$ npm i html-webpack-plugin --save-dev

and setup it in webpack.config.js specifying the template in which we already have been using,

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCSSAssetsPlugin({
            cssProcessorPluginOptions: {
                discardComments: { removeAll: true },
            },
        }),
    ],
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [

            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            }
        ]
    }
}

Running,

  $ npx webpack

Starting the server and opening the browser,

When we compare the spending time with and without webpack we have practically the same result in time and file’s size but, as well, we have the all facilities that webpack provide for us, no headache when evolving and keep the application.

Conclusion

And that’s it. All assets generated here is available on my github.
What I’am showing here is just a basic using of webpack, but my goal here is let you more comfortable when using that incredible tool that is very requisited by many companies out there.
Don’t stop here, go to visit the webpack.js.org to know more the tool and have fun!

Useful links:

Why webpack

Dependency Graph

Asset Management