Webpack

What is Webpack?

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

Features

  • Code splitting
  • Loaders
  • "Clever parsing" for modules
  • Plugin system
  • Development & debugging
    • watch mode
    • dev server
    • source maps

Build Tools

For Web Apps Assets

Problem #1

Problems

  • lot of files = lot of requests
  • rise of preprocessors
  • build process automation
  • compressing
  • bundling
  • debugging

Solutions

  • framework associated tools
    • RoR - Sprockets
    • Django - Webassets
  • make / jake (rake)
  • Grunt
  • Gulp
  • Broccoli
  • Brunch
  • Webpack

Modules

JavaScript

For Browsers

Problem #2

NodeJS

- module declarations

- export object, function or variable

- import/require dependency

Browsers

- native module implementation - no support

- all declarations (and vendor libraries) goes to global scope

Solutions

- polyfill for wrapping client code and separating scopes

- RequireJS

- CommonJS

- AMD (Asynchronous Module Definition)

- NPM + Browserify

- ES6/7 Modules

- SystemJS

- Webpack

Back to Webpack

And more about features

Installation

  • npm install webpack -g
  • npm install webpack
  • webpack.config.js

Bundles

  • Each entry point produces separate bundle
  • Additional setup detects shared vendors and create additional bundle 
entry: {
  index: './app/frontend/javascripts/index.js'
},
output: {
  filename: '[name]-[hash].js',
  path: './public/assets/'
},
resolve: {
  extensions: ['', '.js']
},
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/built'
  }
}

Dependency

  • require('module')
  • require('dir/file')
  • module.export interface
  • Import/Export syntax
    • now with Babel loader
    • soon native support (Webpack 2.0)

Loaders

  • can be chained 
    • applied in a pipeline
    • final loader is expected to return JavaScript
  • can be synchronous and asynchronous.
  • run in node.js and can do everything that’s possible there
  • accept query parameters - use to pass configuration
  • can be bound to extension / RegExps 
  • installed through npm
  • can emit additional arbitrary files
  • Plugins can give loaders more features

Loaders / Plugins example

  module: {
    loaders: [
      { test: /\.js/, loaders: ['uglify', 'ng-annotate']},
      { test: /\.slm/, loaders: ["template-html-loader"]},
      { test: /\.coffee$/, loader: "coffee" }
    ],
  },
  plugins: [
    new AssetsPlugin({
      path: path.join(__dirname, 'public', 'assets'),
      filename: 'assets.json'
    }),
    new Clean(['./public/assets/'])
  ]

Loaders

  • json: Loads file as JSON
  • raw: Loads raw content of a file (as utf-8)
  • source-map: Extract sourceMappingURL comments from modules and offer it to webpack
  • checksum: Computes the checksum of a file
  • glsl: Loads glsl files and support glsl-chunks.
  • xml: Loads XML as JSON.
  • svg-react: Load SVG files as JSX-ified React.createClass declarations.
  • base64: Loads file content as base64 string
  • ng-annotate: A loader to annotate dependency injections in Angular.js applications.
  • required: Require a whole directory of trees in bulk. Require JS, Import CSS and imports stuff in it.
  • icons Generates iconfont from .svg files (uses gulp-iconfont)

Loaders

  • coffee: Loads coffee-script like JavaScript
  • coffee-jsx: Loads coffee-script with JSX like JavaScript
  • babel: Turn ES6 code into vanilla ES5 using Babel
  • typescript: Loads TypeScript like JavaScript.
  • elm-webpack: Loads Elm files and compiles them to plain JavaScript.
  • html: Exports HTML as string, require references to static resources.
  • jade: Loads jade template and returns a function
  • jsx: Transform jsx code for React to js code.
  • yaml: Converts YAML to JSON
  • css: Loads css file with resolved imports and returns css code
  • less: Loads and compiles a less file
  • sass: Loads and compiles a scss file
  • postcss: Post-process CSS with Autoprefixer and other PostCSS plugins
  • autoprefixer

ES6 = Webpack + Babel

 loaders: [
   { test: /\.js/, loaders: ['babel'] },
 ],

npm install --save babel-loader

Watch mode

  "scripts": {
    "webpack_watch": "webpack --watch",
    "webpack": "webpack"
  },

webpack --watch
package.json

Webpack dev-server

var path = require("path");
module.exports = {
  entry: {
    app: ["./app/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};
$ webpack-dev-server --content-base build/
  • build on top of Express
  • serves static files from build/
  • watch mode
  • recompiles bundles in memory
  • allows to setup hot-reloading

Issues

  • Sprockets replacement?
    • digest & helpers
  • Heroku deploy
    • buildpacks and assets compiling order
"postinstall":
"if [ \"$NODE_ENV\" = \"\"production\"\" ];
then webpack -p --profile --config webpack-prod.config.js; "

There is much more

Go use it!

Or wait for more presentations

Webpack

By Krzysztof Jung

Made with Slides.com

Webpack

  • 1,526

More from Krzysztof Jung