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
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';
}
Angular(2)+Webpack
By Sean Larkin
Angular(2)+Webpack
- 732