Webpack

https://naomiajacobs.github.io/webpacktalk

What is webpack?

Takes stuff that you like to write, to stuff that browsers can read.
Creates fewer requests, smaller responses

What does webpack solve?

Namespacing
Transpiling, uglification, minification
Sending code to the browser efficiently
- Handles the file dependency, loads one script
Webpack does it all in one go

How does Webpack work?

Takes a path to an entry file, it's going to kick everything off
Webpack has four main steps
- Find dependent files
  - Creates array with entry file at first index
    - look for dependency declarations
    - for each dependency
      - validate path
        
        must lead to file or npm module
        
        Add file to array
- Apply loaders
  - a loader is a function that takes in source code, makes changes, returns out code
  - Comes from npm
  - Tell weback which loaders to apply in the config file
    - Can be applied selectively with regex
    - Chain them in whatever order we want
    - Transpilation, uglification, minification, polyfills
- Implement module system
  - CommonJS detour
    - A system of writing JS that allows files to declaring dependencies on each other by importing and exporting modules from those files.
    - require and module.exports
    - It's a Standard, not a library
    - webpack implement the standard
  - Webpack wraps each file in a function
```
// Wrapped file
function(module, webpackRequire) {
  var _ = wepackRequire(1 /* index of lodash in module array */);
  module.exports = _.range(10);
}
```
    - webpackRequire is a function that requires the file by looking up the index in the module array
      - require('lodash') => webpackRequire(1)
- Compiling assets
  - Needs all of our code
  - Needs to have the webpackRequire function
  - Needs to work

Code Example of compiled webpack file

(function(moduleArray) {
  var cache = {};
  function webpackRequire(index) {
    // if we've seen this file before, return it's module.exports
    if (cache[index]) { return cache[index]; }

    var module = { exports: {} };
    var file = moduleArray[index];
    file(module, webpackRequire); // modifies the module.exports
    cache[index] = module.exports;

    return module.exports;
  }
  return webpackRequire(0);
})([entryFile, dependency1, dependency2...])

yilenpan/webpack.md

Webpack

What is webpack?

What does webpack solve?

How does Webpack work?

Webpack wraps each file in a function

Code Example of compiled webpack file

Webpack

What is webpack?

What does webpack solve?

How does Webpack work?

Webpack wraps each file in a function

Code Example of compiled webpack file