Angular2 + Webpack
Webpack all the things!
by Sean Larkin
});
describe('me' () => {
});
describe('work' () => {
http://mutualofomaha.com/careers/
http://mutualofomaha.com/about/
Come join us in Silicon Prairie!
Lets talk about web application bundling.
You have a lot of options...
Task Runners (Gulp, Grunt, Node, etc.)
Bundlers (Browserify, Rollup, JSPM, SystemJS etc.)
<Insert all the logos here to make it look overwhelming>
A task runner...
..is an application that automates time consuming, repetitive and boring tasks.
Allows to define steps, what they must do and how they are combined or chained.
Most of them (all?) uses an imperative notation defining what tasks must do and how they must do.
The task runner way...
A gulp example...
// Concatenate JS Files
gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('build/js'));
});
// Build CSS from SASS
gulp.task('sass', function() {
return sass('src/scss/style.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'));
});// Complex task
gulp.task('default', ['scripts', 'sass']);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, ...
Angular2 + Webpack <3
By Sean Larkin
