old

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
- One request per file
- Hard to manage order dependencies
- It's slow

Namespacing

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

IIFE - Immediate Invoke Function Expression

Sending code to browsers more efficiently

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

After Bundled

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!

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.

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
Remember the array that was created in the first step?
Replaces all instances of require("foo") with webpackRequire(indexOfFoo) (another loader)

4. Create final asset

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

4 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 : Everything else that loaders can't

Webpack basic usage

$ npm install --save-dev webpack webpack-cli

// 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/
    }]
  }
};

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,
            }
          }
        ],
      },
    ],
  },
  // ...
}