Learn/Understand Webpack

is not magic!

Cesar Guerrero

Front End Developer

@mono_guerin

"We are better and happier developers when we understand our tools"

-Webpack: It's Not Magic | Naomi Jacobs | BuzzJS 2.0 2017

Why Webpack?

Apr 2015 - May 2018

https://npm-stat.com/

What is Webpack?

Webpack is a module bundler that takes modules with dependencies and emits static assets representing those modules.

Stuff that is nice for you to write

Stuff that is nice for browser to read

Stuff that is nice for you to write

Easy for humans to read
Pretty formatting
Readable variable names and methods
Code is separated into multiple files and organized logically
Other languages rather than JS (ES6+, TypeScript, CoffeeScript, JSX, Vue)

Stuff that is nice for browser to read

Old School JS (ES5), standardized JS
Fewer requests (good for bad or mobile connections)
Smaller Responses
- Whitespaces
- Pretty variable names

Problems that Webpack Solve

Namespacing
- Variables declared outside of functions are global
Optimization
- Uglification
- Minification (get rid of whitespaces)
Sending code to browsers more efficiently
- Just one request needed to get the bundle.

Namespacing

(function() {
    var miScopedVarible = 10;
    var notGlobalVar = "I am not global";
}());

IIFE - Immediate Invoke Function Expression

Sending code to browsers more efficiently

After Bundled***

<script src="bundle.js"></script>

How I assumed Webpack worked

webpack

main.js

How Webpack really works

Webpack takes a path to a single starting file (Entry)
Apply 4 steps:
1. Find dependent files
2. Apply Loaders
3. Implement module system
4. Create final asset

1. Find dependent files

Make an array to keep track of the dependent files
Start at entry file
Look for dependency declarations (AMD, CommonJS, ES6...)
For each
- Validate path
- Must lead to a file or npm module
- Add file to the array

Remember this!

[ entryModule, dependency1, dependency2, etc... ]

2. Apply Loaders

Apply user specific loaders.
- We can chain loaders

JSON Loader - https://github.com/webpack-contrib/json-loader

Loader: is a function that takes in source code, makes changes, and returns the new code.

function jsonLoader (source) {
    return "module.exports = " + JSON.stringify(source) + ";";
};

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: "vue-loader",
            include: /src/
        },
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        },
        {
            test: /\.less$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "less-loader"
                }
            ]
        }
    ]
}

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: "vue-loader",
            include: /src/
        },
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        },
        {
            test: /\.less$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "less-loader"
                }
            ]
        }
    ]
}

less-loader

css-loader

style-loader

style.less

less-loader

css-loader

style-loader

*.css

less-loader

css-loader

style-loader

*.js

3. Implement module system

Wraps each file in a function (a loader)
Passes two arguments
- module
- webpackRequire (more on this, later)
Remember the array that was created in the first step?
Replaces all instances of require("foo") with webpackRequire(indexOfFoo) (another loader)

// double.js
module.exports = function (x) {
    return x * 2;
};

// double.js
function (module, webpackRequire) {
    module.exports = function (x) {
        return x * 2;
    };
}

// main.js
var doubleMethod = require("./double.js");

console.log(doubleMethod(2)); // 4

// main.js
function (module, webpackRequire) {
    var doubleMethod = webpackRequire(1);

    console.log(doubleMethod(2)); // 4
}

4. Create final asset

Must define the webpackRequire function
Must have all our code ( entry file and dependencies)
Must pull all together

The four core concepts

Entry* : Tells webpack WHAT (files) to load for the browser
Output* : Tells webpack WHERE and HOW to distribute bundles (compilations)
Loaders : Tells webpack how to load files in your content base
Plugins : Is used to customize the webpack build process in a variety of ways.

Plugins construction

Plugins are ES5 classes
A plugin for webpack consists of
- A named JavaScript function.
- Defines apply method in it's prototype.
- Specifies webpack's event hook to attach itself.
- Manipulates webpack internal instance specific data.
- Invokes webpack provided callback after functionality is complete.

// A named JavaScript function.
function MyExampleWebpackPlugin() {

};

// Defines `apply` method in it's prototype.
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
  // Specifies webpack's event hook to attach itself.
  compiler.plugin('webpacksEventHook', function(compilation, callback) {
    console.log("This is an example plugin!!!");

    // Invokes webpack provided callback after functionality is complete.
    callback();
  });
};

Using Plugins

var webpack = require('webpack')
// importing plugins that do not come by default in webpack
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// adding plugins to your configuration
plugins: [
  // build optimization plugins
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.css'
  }),
  // compile time plugins
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  })
]

Webpack basic usage

$ npm install --save-dev webpack

// Development
$ webpack main.js dist/bundle.js

// Production
$ webpack main.js dist/bundle.js -p

Webpack Config File

// webpack.config.js

var path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
};

// webpack.config.js

var path = require("path");

module.exports = {
  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: ["babel-loader"],
      exclude: /node_modules/
    }]
  }
};

$ webpack

Eslint

$ npm install eslint-loader eslint --save-dev

Install eslint-loader and eslint

Create an .eslintrc file

// .eslintrc
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "rules": {
        "semi": 2
    }
}

Using EsLint

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "eslint-loader"
        ],
      },
    ],
  },
  // ...
}

Fail on eslint warning

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { 
            loader:"babel-loader"
          },
          {
            loader: "eslint-loader",
            options: {
              failOnWarning: true,
            }
          }
        ],
      },
    ],
  },
  // ...
}

Webpack Dev Server

$ npm install webpack-dev-server --save-dev

Install webpack dev server dependency

Add "devServer" key to the config file

devServer: {
  contentBase: path.join(__dirname, "dist"),
  port: 9000
}

$ webpack-dev-server

Hot Module Replacement

HMR updates modules while an application is running, without a full reload.
Benefits:
- Retain application state which is lost during a full reload.
- Save valuable development time by only updating what's changed.
- Tweak styling faster -- almost comparable to changing styles in the browser's debugger.

const webpack = require('webpack');

module.exports = {
  // ...

  plugins: [
    new webpack.HotModuleReplacementPlugin() // Enable HMR
  ],

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 9000,
    hot: true // Tell the dev-server we're using HMR
  }
  // ...
};

Enable HMR

Tree Shaking

Dead-code elimination, or more precisely, live-code import.
It relies on ES6 module import/export for the static structure of its module system.
The name and concept have been popularized by the ES6 module bundler rollup.

import { get } from 'lodash';

Thank You!

Special Thanks to the Z-team:

Andres Zorro
Mauricio Cubillos
Max Florez

https://tinyurl.com/bogota-webpack