Understanding the concepts of Webpack

The webpack is a package of static modules for modern JavaScript applications. When processing the application, the webpack generates a graph that maps each module and its dependencies and generates one or more packages. In other words, it joins the JavaScript files (and also other formats like CSS, JS, SASS, JPG, SVG, PNG …) of your application (be it your files or external dependencies) in one file (to more than one), in an optimized way. The files are unified in the right order, without duplication and can be minified to reduce the size.

Core Concepts

Entry: Entry point that indicates which module the webpack should use to start the construction of the internal dependency graph. When defining an entry point, the webpack will find all dependencies and import.

Output: The output property defines the name and location of the package generated by the webpack. The default directory is ./dist and the .dist/main.js file

Loaders: By default the webpack only understands JavaScript files, so that it can understand other types of files we must use Loaders which are modules that can be installed separately allowing the webpack to convert these files into modules.

Plugins: The plugins serve to perform a variety of tasks such as package optimization, asset management and injection of environment variables.

Mode: In the mode attribute, the webpack execution mode is defined as production, development or none.

In web applications, we commonly have many modules with dependencies.

Configuartion File Example

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './frontent/main.js',
  output: {
    path: path.resolve(_dirname, 'public', 'assets', 'js'),
    filename: 'bundle.js'
  },
  module: {
    rules [{
      exclude: /node_modules/,
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env']
        }
      }
    }]
  },
  devtool: 'source-map'
}

Benefits of Webpack

Webpack gives you control over how to treat different assets it encounters. For example, you can decide to inline assets to your JavaScript bundles to avoid requests. Webpack also allows you to use techniques like CSS Modules to couple styling with components, and to avoid issues of standard CSS styling.

How do Webpack works?

Webpack is a command-line tool to create bundles of assets (code and files). Webpack doesn't run on the server or the browser. Webpack takes all your JavaScript files and any other assets and transforms them into one huge file. This big file can then be sent by the server to a client's browser.

That's all for now folks. Happy coding day!

Comments

[Zdravko Tyankov]

That was a quick and simple webpack introduction. Thank you!