Web Apps building with Webpack

web apps building with webpack
ignacio velazquez

/toc
• intro
• what it is
• why using it
• features
• takeaway
• where are we

/intro/what
static module bundler for modern javascript applications

/intro/what
import $ from 'jquery';
import { Mailer, LIGHTNING_CROW_MODE } from './mailer';
import Alert from './alert';
import '../scss/alert.scss';
$('document').on('jon-is-in-danger', () => {
Alert.renderWarning(`
<div class="alert alert-danger">
<img class="icon" src=" './img/skull.png "/> Jon is
scuba-diving in a frozen lake
</div>
`);
Mailer.sendMessage({
subject: 'Daenerys',
speed: LIGHTNING_CROW_MODE
});
});
jquery
Mailer
Alert
alert
bundle
skull
bundle
skull
index

/intro/how
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
filename: './dist/bundle.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};

/intro/why
The evolution of Homo Frontendalis. Source: blog.qmo.io

/intro/why
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
<script src="src/js/jquery.min.js"></script>
<script src="src/js/user-provider.js"></script>
<script src="src/js/album-provider.js"></script>
<script src="src/js/index.js"></script>
<link rel="stylesheet" href="src/css/bootstrap.min.css">
<link rel="stylesheet" href="src/css/main.css">
<link rel="stylesheet" href="src/css/card.css">
</head>
<body>
<div class="container-fluid">
<div class="row main-action">
<div class="col-6 offset-3">
<button id="load-users" class="btn btn-primary btn-block">
Load Users
</button>
</div>
</div>
<div id="target-users" class="row">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
<script src="dist/bundle.js"></script>
<link rel="stylesheet" href="dist/bundle.css">
</head>
<body>
<div class="container-fluid">
<div class="row main-action">
<div class="col-6 offset-3">
<button id="load-users" class="btn btn-
primary btn-block">
Load Users
</button>
</div>
</div>
<div id="target-users" class="row">
</div>
</div>
</body>
</html>

/features/loaders-and-plugins
Mailer
Alert
alert
bundle
skull
bundle
skull
loaders plugins
uglifyJS
extract
CSS

/features/pre-compile
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
};
class Stark {
constructor(name) {
this.name = name;
}
};
const sansa = new Stark('Sansa');
const tony = new Stark('Tony');
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof
Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Stark = function Stark(name) {
_classCallCheck(this, Stark);
this.name = name;
};
;
var sansa = new Stark('Sansa');
var tony = new Stark('Tony');

/features/pre-compile?page=2
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
},
module: {
loaders: [
{
test: /.scss$/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
}
};
$primary: #ff0567;
.text-color-primary {
color: $primary;
}
a {
color: $primary;
}
.text-color-primary {
color: #ff0567;
}
a {
color: #ff0567;
}

/features/minify-and-mangle
module.exports = {
entry: [
'./src/js/index.js'
],
output: {
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
mangle: true,
minify: true,
comments: false
})
]
};
/**
* Have you seen the trailer?
*
* @returns {boolean}
*/
let infinityWarIsGonnaBeAmazing = () => {
return true;
};
function a(){return true}

/features/optimize-images
loaders: [
{
test: /.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
},
],
}
]
SVG PNG JPEG
GIFF TIFF …

/takeaway
• Reduce number of files to load in the browser
• Use latest Javascript version
• Include in the build libraries from npm
• Minify and obfuscate Javascript code
• Use style pre-processors
• Reduce images file size
• Code linting
• Develop faster via browser-webpack sync

thanks
https://slideshare.net/nass600
/web-apps-building-with-
webpack
https://twitter.com/nass600
https://linkedin.com/in/nass600
https://github.com/nass600

Web Apps building with Webpack

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Web Apps building with Webpack

Semelhante a Web Apps building with Webpack (20)

Último

Último (20)

Web Apps building with Webpack