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

Thank you!

Unpacking Webpack 4

By Andrew Schutt

Unpacking Webpack 4

a presentation for Des Moines Webgeeks Spring Social about Webpack and new features in Webpack 4

  • 2,176