old
Cesar Guerrero
Front End Developer
@mono_guerin
"We are better and happier developers when we understand our tools"
-Webpack: It's Not Magic | Naomi Jacobs | BuzzJS 2.0 2017
Why Webpack?
Apr 2015 - May 2018
https://npm-stat.com/
What is Webpack?
- Webpack is a module bundler that takes modules with dependencies and emits static assets representing those modules.
Stuff that is nice for you to write
Stuff that is nice for browser to read
Stuff that is nice for you to write
- Easy for humans to read
- Pretty formatting
- Readable variable names and methods
- Code is separated into multiple files and organized logically
- Other languages rather than JS (ES6+, TypeScript, CoffeeScript, JSX, Vue)
Stuff that is nice for browser to read
- Old School JS (ES5), standardized JS
- Fewer requests (good for bad or mobile connections)
- Smaller Responses
- Whitespaces
- Pretty variable names
Problems that Webpack Solve
- Namespacing
- Variables declared outside of functions are global
- Optimization
- Uglification
- Minification (get rid of whitespaces)
- Sending code to browsers more efficiently
- One request per file
- Hard to manage order dependencies
- It's slow
Namespacing
(function() {
var miScopedVarible = 10;
var notGlobalVar = "I am not global";
}());IIFE - Immediate Invoke Function Expression
Sending code to browsers more efficiently
<script src="bundle.js"></script>After Bundled
How I assumed Webpack worked
JS
webpack
main.js
How Webpack really works
- Webpack takes a path to a single starting file (Entry)
- Apply 4 steps:
- Find dependent files
- Apply Loaders
- Implement module system
- Create final asset
1. Find dependent files
- Make an array to keep track of the dependent files
- Start at entry file
- Look for dependency declarations (AMD, CommonJS, ES6...)
- For each
- Validate path
- Must lead to a file or npm module
- Add file to the array
Remember this!
2. Apply Loaders
- Apply user specific loaders.
- We can chain loaders
JSON Loader - https://github.com/webpack-contrib/json-loader
Loader: is a function that takes in source code, makes changes, and returns the new code.
less-loader
css-loader
style-loader
style.less
less-loader
css-loader
style-loader
*.css
less-loader
css-loader
style-loader
*.js
3. Implement module system
- Wraps each file in a function (a loader)
- Passes two arguments
- module
- webpackRequire
- Remember the array that was created in the first step?
- Replaces all instances of require("foo") with webpackRequire(indexOfFoo) (another loader)
4. Create final asset
- Must define the webpackRequire function
- Must have all our code ( entry file and dependencies)
- Must pull all together
4 Core Concepts
- Entry* : Tells webpack WHAT (files) to load for the browser
- Output* : Tells webpack WHERE and HOW to distribute bundles (compilations)
- Loaders : Tells webpack how to load files in your content base
- Plugins : Everything else that loaders can't
Webpack basic usage
$ npm install --save-dev webpack webpack-cli
// Development
$ webpack main.js dist/bundle.js
// Production
$ webpack main.js dist/bundle.js -p
Webpack Config File
// webpack.config.js
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
}
};// webpack.config.js
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [{
test: /\.js$/,
use: ["babel-loader"],
exclude: /node_modules/
}]
}
};Using EsLint
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader",
"eslint-loader",
],
},
],
},
// ...
}Fail on eslint warning
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader:"babel-loader"
},
{
loader: "eslint-loader",
options: {
failOnWarning: true,
}
}
],
},
],
},
// ...
}Webpack is not magic!
By Cesar Guerrero Rincon
