Webpack and Babel

Summary: Learning about the Webpack and Babel and its components.

Webpack

Webpack is a powerful and flexible module bundler for JavaScript applications. It’s designed to bundle JavaScript files for use in a browser and helps to manage dependencies, optimize assets like CSS, images, and fonts, and improve overall performance.

Entry

The entry point specifies the file where Webpack starts the bundling process. This is where it looks for dependencies and modules. The default value is ./src/index.js.

• Single Entry

module.exports = {
  entry: './src/index.js',
};

• Multiple Entries: We can define multiple entry points when bundling different files, for example for a multi-page application.

module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js',
  },
};

Output

The output property specifies where to emit the bundled files. We can customize the filename and path of the output.

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',  // The name of the output file
       path: path.resolve(__dirname, 'dist'),  // Absolute path to the output directory
     },
   };

Loaders

Loaders allow Webpack to process other file types besides JavaScript, such as CSS, images, or TypeScript. They transform these files into modules that Webpack can bundle.

• CSS Loader: If we want Webpack to handle .css files, we need the css-loader and style-loader.
  • style-loader injects CSS into the DOM.
  • css-loader allows Webpack to understand CSS imports and dependencies.

npm install css-loader style-loader --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,  // Regex to match .css files
        use: ['style-loader', 'css-loader'],  // Loaders to process the file
      },
    ],
  },
};

• File Loader (for images and fonts)

npm install file-loader --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,  // Match image files
        use: ['file-loader'],  // Use file-loader to handle these
      },
    ],
  },
};

Plugins

Plugins extend Webpack’s functionality. While loaders transform files, plugins affect the output of the build process like optimizing files, injecting environment variables.

• HTMLWebpackPlugin: This plugin simplifies the creation of HTML files to serve our bundles.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',  // Template file to use
      filename: 'index.html',        // Output HTML file
    }),
  ],
};

• CleanWebpackPlugin: Cleans up the /dist folder before each build.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin(),  // Automatically cleans up the dist folder
  ],
};

Babel

Babel is a popular JavaScript compiler that allows developers to write modern JavaScript ES6+ and beyond while ensuring compatibility with older browsers or environments that do not support newer ECMAScript features. Babel primarily transpiles JavaScript code by converting modern syntax into older, widely supported versions.

• Transpiling ES6+ to ES5: Babel rewrites modern ES6+ code into older JavaScript syntax like converting let and const back to var or replacing arrow functions with standard function expressions.
• Polyfilling New Features: Babel can also polyfill newer APIs Promise, Set, Map, Array.from() that are not supported in older environments.
• Experimental Features: Babel allows developers to use future ECMAScript features (like decorators or private class fields) before they are finalized.
• Module Compatibility: It can convert modern ES6 module syntax import/export into older formats CommonJS or AMD for environments like Node.js or older browsers.

Plugins

Babel relies on plugins to transform our code. Each plugin focuses on a specific transformation, such as transpiling a particular syntax feature arrow functions or classes.

• Transforming Arrow Functions: The @babel/plugin-transform-arrow-functions plugin rewrites ES6 arrow functions into traditional ES5 function expressions.

const add = (a, b) => a + b;
|
v
var add = function(a, b) {
  return a + b;
};

   npm install @babel/plugin-transform-arrow-functions --save-dev

Babel configuration .babelrc:

   {
     "plugins": ["@babel/plugin-transform-arrow-functions"]
   }

Presets

Presets are collections of multiple Babel plugins that target specific sets of features. The most common preset is @babel/preset-env, which includes a collection of plugins to transform modern JavaScript based on the ECMAScript specification.

• @babel/preset-env: This preset allows Babel to target different environments specific browser versions or Node.js and only transpile the necessary features.

npm install @babel/preset-env --save-dev

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"  // Target modern browsers with >0.25% usage
    }]
  ]
}

Polyfills

Some modern JavaScript features like Promise, Map, Set require more than just syntax transformation. These features must be polyfilled to work in older environments. Babel integrates with core-js to provide polyfills for missing features.

npm install core-js @babel/preset-env --save-dev

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",  // Automatically add polyfills based on usage in the code
      "corejs": 3              // Use core-js version 3
    }]
  ]
}

Babel Configuration Files

Babel configurations can be defined in various ways, the most common being .babelrc and babel.config.json.

.babelrc

This is the most commonly used configuration file. It is a JSON file placed in the root directory of our project and applies Babel settings to the files in the current directory.

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

Babel with Webpack

Babel is often integrated with Webpack to transpile JavaScript during the bundling process.

Install Babel with Webpack

Install the necessary packages:

   npm install @babel/core babel-loader @babel/preset-env --save-dev

Webpack Configuration

Add the Babel loader to our Webpack configuration to transpile JavaScript files using Babel.

   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     module: {
       rules: [
         {
           test: /\.js$/,  // Apply Babel to all .js files
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']  // Transpile modern JavaScript
             }
           }
         }
       ]
     }
   };