rtCamp notes, day 52 of undefined

Asset Building

Webpack

Webpack is a javascript module bundler, the main purpose or feature of the weback is javascript bundler, but it can also help us generate modules for other scripts such as css, html etc front end assets. It internally builds dependency graph through entry points and it combines all the modules are projects needs/requires into a single module.

The JS bundler is a type of compiler which compiles all the JS code and its related code ( dependencies ) into a single JS file.

Entry Point

Entry point is referred to as the file from which the the webpack should begin building the internal graph for the dependencies, the webpack automatically clears out which modules would be added as dependency and the order in which they are added.
Therefore we just need to define the entry point and it would create the graph about the other files and modules automatically.

The entry point for the webpack is set to ./src/index.js if there is no entry point specified under the config file.

What is the config file for webpack?

The config file for webpack is the webpack.config.js

How to change the entry point?

We can use the config file to change the entry point

module.exports = {
  entry: 'dir/entry_file.js',
};

Loaders

By default, the webpack only supports merging different JS into a single one, and it only supports, this is where the loaders comes into action, the loaders allow the webpacks to support different languages as well, this way they can be processed by the webpack and added to the dependency graphs.

For loaders, we define the test and use properties, the test property adds a regex to which the the files must match and the use specify which loader would be used for the matched files.

For e.g.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['example-loader'],
      },
    ],
  },
};

This would use the example-laoder for the js files.

Plugins

While the loader in webpack works at individual file to generate a bundle. The plugins work at the created bundles, the plugins gets executed at the end of the bundle creation.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js/,
        use: ['example-loader'],
      },
    ],
  },
plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

A plugin can be invoked this way into webpacks

Mode

The mode parameter allows to set the mode to production or development, the difference is that in production mode the webpack would generate optimized and minified bundles.

While the development would need us to debug the code.

Babel

Babel is used to compile ES or Ecmascript code to a backward compatible js code so that even previous browsers can support the code. Babel supports compiling the code by changing different things for example the arrow functions

The Babel also adds polyfills, polyfills are piece of code which gets added to the browser so that they support the functions they don’t support, to enable the backward compatibility.
For example
Code:

[1, 2, 3].map(n => n + 1);
 

The converted code would be

[1, 2, 3].map(function(n) {
  return n + 1;
});

This converted code would be enabled in the previous browsers as well.