Workshop

Node.js inspector

Webpack plugin

Node.js

inspector

Native support

  • Available on Node.js v6.3.0+

  • Run node with the --inspect flag

Tools to inspect

  • VS Code 1.10+

  • Chrome DevTools 55+

  • CLI node-inspect

  • WebStorm

VS Code inspect

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Node: Nodemon",
      "restart": true
    }
  ]
}

  • Run node --inspect <file>

  • Open debug panel and run debug

Chrome Devtools inspect

Two options:

  • Standalone Chrome DevTools Node.js

  • VS Code launch Chrome debugger

Chrome DevTools Node.js

  • Run node --inspect <file>

  • Open chrome://inspect

  • Inspect remote target

VS Code Chrome debugger

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Node: Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "trace": "verbose"
    }
  ]
}

  • Run node --inspect <file>

  • Open debug panel and run debug

Live demo

Node.js inspector

🚀

Project example

The minimalist project example includes a database of stores with coordinates and categories. The express endpoint filter stores by parameters (categories, latitude, longitude, radius, limit).

 

It is a small extract of the original project storelocatorjs.

Prerequisites

  • VS Code

  • Chrome

  • GIT

  • Terminal

  • Clone the project example

  • Open node-inspector directory

  • Install dependencies

Demo steps

  • Run `npm start`

  • Access the webservice

  • Add breakpoints into the source files

  • Run `npm run inspect`

  • Run VS Code debug Node: Nodemon

  • Refresh the browser

  • Manipulate the VS Code inspector

  • Test VS Code debug Node: Chrome

Create a

Webpack Plugin

Webpack Plugin?🤔

Plugins are a key piece of the webpack ecosystem and provide the community with a powerful way to tap into webpack's compilation process.

 

A plugin is able to hook into key events that are fired throughout each compilation

Philosophy

Create a Webpack plugin personnalisable and not only for your purpose. Think community!


It is not the plugin which is adapted to your project, but your project which uses the plugin.

Write a Javascript class

module.exports = class SampleWebpackPlugin {
  /**
   * Apply function is automatically called by the Webpack main compiler
   *
   * @param {Object} compiler The Webpack compiler variable
   */
  apply (compiler) {
    compiler.hooks.emit.tap('SampleWebpackPlugin', this.hookCallback.bind(this));
  }

  /**
   * Hook expose by the Webpack compiler
   *
   * @param {Object} compilation The Webpack compilation variable
   */
  hookCallback (compilation) {
    console.log(compilation);
  }
};

Official Webpack Documentation

Compiler 

The Compiler module is the main engine that creates a compilation instance with all the options.

 

It extends the Tapable class in order to register and call plugins.

Compilation

The Compilation module is used by the Compiler to create new compilations.

 

A compilation instance has access to all modules and their dependencies. It is the literal compilation of all the modules in the dependency graph of an application.

 

The Compilation class also extends Tapable.

 Include the plugin

const SampleWebpackPlugin = require('../src/index');

module.exports = {
  plugins: [
    new SampleWebpackPlugin()
  ]
};

Add some parameters

const path = require('path');
const SampleWebpackPlugin = require('../src/index');

module.exports = {
  plugins: [
    new SampleWebpackPlugin({
      outputPath: path.resolve(__dirname, `../web/assets`),
      fileName: 'manifest.json',
      onBuild: (manifest) => {
        console.log(manifest);
      }
    })
  ]
};

Next, get parameters in the constructor plugin.

Live demo

Webpack plugin

🚀

Project example

The minimalist project example includes a Webpack configuration with two entrypoints.

 

It is a small extract of the original project chunks-webpack-plugin.

Prerequisites

  • VS Code

  • Chrome

  • GIT

  • Terminal

  • Clone the project example

  • Open webpack-plugin directory

  • Install dependencies

Demo steps

  • Run `npm start`

  • Check build files

  • Add breakpoints into the plugin

  • Run `npm run inspect`

  • Run VS Code debug Node: Nodemon

  • Update source files 

  • Manipulate the VS Code inspector

  • Open the Chrome inspector

Use cases

Test Webpack compiler

beforeEach(() => {
	compilerWebpack = {
		hooks: {
			emit: {
				tap: () => {}
			}
		}
	};
});

Test Webpack compilation

const entrypointsMap = new Map();
entrypointsMap.set('app-a', {
	chunks: {
		files: [
			'css/app-a.css',
			'js/app-a.js'
		]
	},
	getFiles: () => entrypointsMap.get('app-a').chunks.files
});

beforeEach(() => {
	compilationWebpack = {
		assets: {},
		entrypoints: entrypointsMap,
		options: {
			output: {
				path: '/dist/',
				publicPath: '/dist'
			}
		}
	};
});

Resources

Thanks! 🙌