Webpack all the things!
Twitter/Github/SO/Codepen: @TheLarkInn
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)
FIXME: PUT ALL THE LOGOS HERE
One day I got 'stuck' using 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, ...
Webpack can be configured through:
module.exports = {
// configuration
};
Not an exhaustive list of options !!!
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
// 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.
module.exports = {
entry: './index.js';
}