Table of Contents- Building a Custom Webpack Loader

• Developing a Webpack Plugin
• Debugging Node.js Applications in Chrome

Building a Custom Webpack Loader

Webpack loaders transform source files of a certain type into another format. They're essential for processnig different file types like CSS, TypeScript, or JSX.

Here's how to create a custom loader that converts CSS files into JavaScript style tags:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: './style-inject-loader.js',
            options: { enableCache: true }
          }
        ]
      }
    ]
  }
};

// style-inject-loader.js
module.exports = function(content) {
  const options = this.getOptions(); // { enableCache: true }
  
  return `
    const styleElement = document.createElement('style');
    styleElement.textContent = ${JSON.stringify(content)};
    document.head.appendChild(styleElement);
  `;
}

This loader takes CSS content and returns JavaScript code that injects the CSS as a style tag in the DOM.

Developing a Webpack Plugin

While loaders handle individual files, plugins have access to the entire webpack build process and can modify it in various ways.

Here's a custom plugin that logs information about the build process:

const BuildAnalyzerPlugin = require('./build-analyzer-plugin');

module.exports = {
  plugins: [
    new BuildAnalyzerPlugin({ verboseLogging: true })
  ]
};

class BuildAnalyzerPlugin {
  constructor(config) {
    this.config = config;
  }

  /**
   * Define an apply method on the plugin prototype
   * @param {Compiler} compiler
   */
  apply(compiler) {
    // Documentation: https://webpack.js.org/api/compiler-hooks/
    // compiler.hooks.<hook>.<sync: tap; async: tapAsync|tapPromise>
    // tapAsync('PluginName', (..., callback) => { callback() })
    // tapPromise('PluginName', () => { return Promise })
    // Async Series: Multiple hooks called sequentially (emit)
    // Async Parallel: Multiple hooks called without blocking (make)
    compiler.hooks.make.tapAsync("BuildAnalyzerPlugin",
      /** @param {Compilation} compilation */
      (compilation, done) => {
        compilation.hooks.seal.tap("BuildAnalyzerPlugin", () => {
          if (this.config.verboseLogging) {
            console.log('Modules sealed, optimization starting');
          }
        });
        
        compilation.hooks.processAssets.tapPromise("BuildAnalyzerPlugin", (assets) => {
          return new Promise((resolve) => {
            if (this.config.verboseLogging) {
              console.log(`Processing ${Object.keys(assets).length} assets`);
            }
            resolve();
          });
        });
        
        done();
      });
  }
}

module.exports = BuildAnalyzerPlugin;

This plugin hooks into different stages of the webpack build process, allowing you to analyze and modify the build as needed.

Debugging Node.js Appliactions in Chrome

Debugging Node.js code in Chrome DevTools is straightforward:

1. Launch your Node.js application with the debug flag:

   node --inspect-brk your-app.js
   
   

2. Open Chrome and press F12 to open DevTools

3. Click the Node.js icon in the top-left corner of the DevTools console to connect to your Node.js process

This allows you to set breakpoints, inspect variables, and step through your Node.js code directly in Chrome's developer interface.