Unpacking Webpack

Andrew Schutt

Who I'm I?

What's a Webpack?

What's a Webpack?

A static module bundler for modern JavaScript applications.

...recursively builds a dependency graph that includes every module ... then packages all of those modules into one or more bundles.

Modules

Modules

Good authors divide their books into chapters and sections; good programmers divide their programs into modules.

Modules

JS

JS

JS

JS

JS

JS

JS

JS

JS

JS

Modules

JS

JS

JS

JS

JS

JS

JS

JS

JS

Modules

JS

JS

JS

JS

JS

JS

JS

JS

JS

CSS

IMG

Dependency Graph

Dependency Graph

D

C

B

A

Four Core Concepts

Four Core Concepts

Entry

Four Core Concepts

Entry

Output

Four Core Concepts

Entry

Output

Loaders

Four Core Concepts

Entry

Output

Loaders

Plugins

Configuration

Configuration

    
    const path = require('path');

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

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlPlugin({
          template: "./html/index.html"
        })
      ]
    };

Configuration

    
    const path = require('path');

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

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlPlugin({
          template: "./html/index.html"
        })
      ]
    };

Configuration

    
    const path = require('path');

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

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlPlugin({
          template: "./html/index.html"
        })
      ]
    };

Configuration

    
    const path = require('path');

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

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlPlugin({
          template: "./html/index.html"
        })
      ]
    };

Configuration

    
    const path = require('path');

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

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlPlugin({
          template: "./html/index.html"
        })
      ]
    };

Webpack 4

Webpack 4

• No config

Webpack 4

• No config
• mode

Webpack 4

• No config
• mode
• Speed 

Example

https://github.com/cartothemax/webpack-example-app

Thank you!