Angular(2)+Webpack

Webpack all the things!

Twitter/Github/SO/Codepen: @TheLarkInn

describe('me' => {

});

User Experience Developer @ Mutual of Omaha

Angular Fanboy/Apologist/Advocate

Codementor

Been on the scene for ~3 years

Obsessed with toolings, and Developer Experience (DX)

LETS TALK ABOUT WEB APP BUNDLING

FIXME: PUT ALL THE LOGOS HERE

Lots of options to choose from...

LETS TALK ABOUT TASK RUNNERS

Grunt

Convention over Code
Runs tasks defined via plugins or custom scripts
Time consuming to maintain and make changes to
Fragile once built
500+ lines (total code) for scaled web apps.

Gulp

Coding over Convention
Passes data through stream, which stream-tasks are registered against it and chained until work is complete.
Slightly easier to maintain
200+ line (total code) for scaled web apps

A real gulp example...

A real grunt example...

One day I got 'stuck' using Webpack...

Webpack

Webpack is a module bundler and not a task runner.

Analyzes dependencies among your modules (not only JS but also CSS, HTML, etc) and generates assets.

Understands multiple standards for how to define dependencies and export values: AMD, CommonJS, ES6 modules, ...

The flow...

Configuration

Webpack can be configured through:

Command Line Interface (Passed when executed)
Using webpack API (for NodeJS) (Great to integrate with grunt, gulp or your own build scripts)
Configuration file (Not a JSON, it is a JavaScript file, really a module)

module.exports = {
    // configuration
};

Options

context: Base directory for resolving the entry option. Note it is absolute path !!!
entry: The entry point of your bundle (the initial file where your application starts). Can be a string, an array or an object (for multiple entries).
output: Determines the out folder, file names, etc.
module: Options affecting normal modules, like which one must be automatically loaded.
resolve: Determines how modules are loaded.
target: Compiles depending the target environment (browser, node, webworker, etc).
devtool: Enhance debugging (generates map files).
plugins: Additional plugins added to the compiler.

Not an exhaustive list of options !!!

Webpack: 4 Key Concepts

Entry/Entries

module.exports = {
  entry: './index.js',
  //...
}

Serves as the contextual root of your project

index.js

b.comp.js

a.comp.js

index.css

amd.lib.css

amd.lib.js

es6.lib.js

index.less

ui.lib.js

ui.lib.css

a.comp.css

Webpack: 4 Key Concepts

Entry/Entries

// Concatenation via Array Syntax 
// Webpack now searches through
// both files and their deps.
module.exports = {
  entry: [
    './index.js', 
    './some.dev.env.script.js'
  ],
  //...
}

Flexible syntax for multiple entry points.

Webpack - 4 Key Concepts

module.exports = {
  entry: './index.js';
}