Webpack

–See no evil monkey
“Webpack is just a module bundler.”
!

Why do we need a
module bundler?

JSMin
The JavaScript Minifier
Douglas Crockford
www.crockford.com
2003-12-04
JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting
in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate
self-documentation.
What JSMin Does
JSMin is a filter that omits or modifies some characters. This does not change the behavior of the program that it is minifying. The result
may be harder to debug. It will definitely be harder to read.
JSMin first replaces carriage returns ('r') with linefeeds ('n'). It replaces all other control characters (including tab) with spaces. It
replaces comments in the // form with linefeeds. It replaces comments in the /* */ form with spaces. All runs of spaces are replaced with
a single space. All runs of linefeeds are replaced with a single linefeed.
It omits spaces except when a space is preceded and followed by a non-ASCII character or by an ASCII letter or digit, or by one of these
characters:
$ _
It is more conservative in omitting linefeeds, because linefeeds are sometimes treated as semicolons. A linefeed is not omitted if it
precedes a non-ASCII character or an ASCII letter or digit or one of these characters:
$ _ { [ ( + -
and if it follows a non-ASCII character or an ASCII letter or digit or one of these characters:
$ _ } ] ) + - " '
No other characters are omitted or modified.

;(function () {
var counter = 0
...
})();
;(function () {
var xpto = 0
...
})();

jQuery
New Wave Javascript
jQuery is a new type of Javascript library. It is not a huge, bloated, framework
promising the best in AJAX - nor is just a set of needlessly complex
enhancements - jQuery is designed to change the way that you write
Javascript.
New: The jQuery Mailing List is now up - join and discuss!
New: The jQuery Blog has just been opened - subscribe now!
What is jQuery?
jQuery is a Javascript library that takes this motto to heart: Writing Javascript
code should be fun. jQuery acheives this goal by taking common, repetitive,
tasks, stripping out all the unnecessary markup, and leaving them short, smart
and understandable.
What does jQuery code look like? The quick and dirty:
The above code snippet looks for all paragraphs that have a class of 'surprise',
adds the class 'ohmy' to them, then slowly reveals them. Click the 'Run' button
to see it in action!
Quick Facts:
jQuery supports CSS 1-3 and basic XPath.
jQuery is about 10kb in size.
jQuery works in Internet Explorer, Firefox, Safari, and Opera.
Getting Started:
$("p.surprise").addClass("ohmy").show("slow");
Congratulations! You just ran a snippet of jQuery code - wasn't that
easy? There's lots of example code throughout the documentation, on
this site - be sure to give all the code a test run, to see what happens.

<html>
<head>
<script src="r.js"></script>
<script>
require(["app.js"])
</script>
</head>
<body>
</body>
</html>
index.html
app.js
require(["jquery.fancy", "jquery.soundy"], function () {
$(".target").fancy()
})

download and drop .min.js
in the project

const path = require('path')
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js",
},
module: {
rules: [
{
test: /.js$/,
use: ['babel-loader'],
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /.(svg|otf|woff|woff2|ttf|otf|png|jpg|gif)$/,
use: ['file-loader'],
}
]
}
}

every single dependency
of your system is a module

J S X J S ( E S 5 )
babel-loader
S C S S C S S
postcss-loader
P N G B A S E 6 4
url-loader
B U N D L E . J S

outputs can be
chunks or files

files are emitted in
output directory

url-loader
file-loader
json-loader
json5-loader
script-loader
babel-loader
coffee-loader
html-loader
pug-loader
jade-loader
style-loader
css-loader
sass-loader
less-loader
postcss-loader
eslint-loader

Webpack

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Webpack

Similar to Webpack (20)

More from Sofian Hadiwijaya

More from Sofian Hadiwijaya (20)

Recently uploaded

Recently uploaded (20)

Webpack