search

rogerxu / rogerxu.github.io

Roger Xu's Blog
3 stars 2 forks source link

JavaScript Build Tools #23

Open rogerxu opened 8 years ago

rogerxu commented 8 years ago

Compare different JavaScript Build Tools

Which Should You Use: Webpack or Browserify & Gulp? | Toptal

Features

rogerxu commented 8 years ago

Grunt

Task Runner

rogerxu commented 8 years ago

Gulp

Task Runner

rogerxu commented 8 years ago

Browserify

Bundler

rogerxu commented 8 years ago

Brunch

Bundler

rogerxu commented 8 years ago

JSPM

Ditching Jspm/System.js For Webpack - I Like Kill Nerds

rogerxu commented 8 years ago

Webpack

Bundler

Hot Module Replacement

Bundle Splitting

Asset Hashing

Loaders and Plugins

comparison

Usage

Webpack: an introduction - ts

Single File Components - vue.js

Deploying For Production - vue.js

Concepts

Loader Evaluation Order

It is good to keep in mind that Webpack's loaders are always evaluated from right to left and from bottom to top (separate definitions). The right to left rule is easier to remember when you think about it in terms of functions. You can read definition loaders: ['style', 'css'] as style(css(input)) based on this rule.

{
  test: /\.css$/,
  loaders: ['style', 'css'],
  include: PATHS.app
}
rogerxu commented 8 years ago

SystemJS

Module Loader

overhead of managing separate dependencies or performance issues introduced by using System.js

Usage

Quickstart - ts