Why Webpack?

By

Lee Blazek

www.berzerk.io

About Me

Angular, Mean Stack, Front-end, Node api's, with a side of iOS

(by day)

About Me

Building apps/api's for public and canvaser's

Colorado Care

Amendment 69

on the November 2016

 

"Health Care is a Human Right,

not a commodity to be bought, sold, and traded!!"

(by night)

Previously

  • Grunt
  • Gulp

Why not Gulp or Grunt?

  • Grunt - HUGE config files
  • not suited for large apps 

What is Webpack?

Existing module bundlers are not well suited for big projects (big single page applications). The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization.

 

Goals

  • Split the dependency tree into chunks loaded on demand
  • Keep initial loading time low
  • Every static asset should be able to be a module
  • Ability to integrate 3rd-party libraries as modules
  • Ability to customize nearly every part of the module bundler
  • Suited for big projects

Main Advantages

  • modules
  • less config
  • faster
  • ease of refactoring/rearraging
  • optional inclusion of code with custom plugins
Grunt Gulp Webpack
code size lots medium  slim
? Configures individual task + based on node streams and piping tasks with hot reloading
so you don't need watchers
live reloading with plugins with plugins yes(web-pack-dev-server)
hot replacement no maybe? yes
bundling
(for lazy loading, js assets)		 needs browserify, requierejs, or other needs browserify, requierejs, or other yes, out of the box
modular styles
(css, sass, etc)		 no no yes
modular assets (images, fonts, etc) no no yes
project organization traverse file/folder structure traverse file/folder structure entry points in code

In its basic config state

//webpack.config.js

 module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js'
     }
 };

Loaders

Loaders are special modules webpack uses to ‘load’ other modules (written in another language) into JavaScript (that webpack understands). For example, babel-loader uses Babel to load ES2015 files.

 

*install via NPM

Plugins

Usually you’ll want to do some additional processing of the bundle in your workflow. An example would be minifying your file so that clients can load it faster. This can be done with plugins. We’ll add the uglify plugin to our configuration:

 

*Lots built in

add a loader

//webpack.config.js

 module.exports = {
  //... previous code

     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
     }
 };

add a plugin

//webpack.config.js

 module.exports = {
  //... previous code
     plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]

 };

More common loaders

{
  test: /\.css$/,
  loader: 'style!css',
  exclude: /node_modules/
  },
  {
  test: /\.scss$/,
  loader: 'style!css!sass',
  exclude: /node_modules/
  },
  {
  test: /\.(png|jpg)$/,
  loader: 'url?limit=25000',
  exclude: /node_modules/
  },
  {
  test: /\.html$/,
  loader: 'raw',
  exclude: /node_modules/
  }

Different from gulp or grunt..

Entry points instead of traversing files/folders

require(./module.js)

require(./module.sass)

require(./module.html)

or in ES6

regular import statements

import './module.js'

Very modular, agile, and easy to change

Run Demo

Webpack is smarter than you think

Custom plugin!

        new webpack.DefinePlugin({
          ON_DEMO: process.env.NODE_ENV === 'demo'
        }),

if(ON_DEMO){
  angular.module('myApp').config(
    require('./page4/page4.config').default
  );

Gotcha's

  • Most but not all front-end modules are ready for webpack(but you can easily update them
  • Modular sass needs some tweeking to get globals
  • usually separate prod and dev config files

To learn more:

  • https://webpack.github.io/
  • https://webpack.github.io/docs/webpack-dev-server.html
  • https://egghead.io/lessons/javascript-intro-to-webpack

Upcoming talks

  • Protractor - Angular meetup -Tuesday August 9th 
  • Colorado Care and tech - Thursday August 18th - Denver
  • Colorado Care and tech - Thursday August 25th - Boulder
  • Colorado Care and tech - Thursday Sept 1st - Denver

Lee Blazek

  • www.berzek.io
  • info@berzerk.io
  • twitter: @surfjedi
  • linkedin: www.linkedin.com/in/leeblazek 
  • https://github.com/berzerk-interactive
Made with Slides.com