Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HOW WE USE WEBPACK.
Pack the web.
BEHIND THE SCENES MAY 2016
Niels Gerritsen
Front-end Developer @ Coolblue
@nielsg89
• Javascript build process
• Building Javascript?
• Using task runners
• Webpack
• Intro
• Demo
• How we use it
AGENDA.
BUILDING JAVASCRIPT?
A JAVASCRIPT APPLICATION.
Files files files.
export default
num =>
num + 1
export default
msg =>
console.log(msg)
import inc...
BUNDLE.
Together we are one.
const increment =
num =>
num + 1
const log =
msg =>
console.log(msg)
log(increment(1))
bundle...
TRANSPILE.
Like travelling to the past.
function increment(num) {
return num + 1
}
function log(msg) {
console.log(msg)
}
...
MINIFIY.
Less is more.
function i(n){return n+1};function l(m)
{console.log(m)};l(i(1))
bundle.min.js
• ES6 is useful for writing clean code
• Minification matters (2 - 8 times smaller files)
• At least until HTTP2, bundling i...
• Gulp or Grunt
• Endless possiblities
• Plugins available for everything
• Browserify
• UglifyJS
• Babel
USING JAVASCRIPT...
• Manual labor
• Lot’s of dependencies
• Repetitive work
PROBLEM WITH TASK RUNNERS.
• Javascript module bundler
• Minimal config
• Extensible with Loaders and plugins
WEBPACK.
DEMO TIME.
1. Bundle
2. Transpile ES6
3. Minify
4. Add CSS
• For Edith, a modern web app we built with React + Redux
• Unique features
• Hot reloading
• Importing other filetypes
• P...
// package.json
{{
"name": "coolblue-edith",
// other meta data
"scripts": {
"dist": "NODE_ENV=production webpack",
"watch...
// webpack.config.js
// imports...
const env = process.env.NODE_ENV
const config = {
entry: {
app: './client/main.js',
ven...
resolve: {
alias: {
modules: path.resolve(__dirname, 'modules')
base: path.resolve(__dirname, 'client')
}
},
/*
instead of...
loaders: [

{

test: /.js$/,
exclude: /node_modules/,
loader: 'babel'

},

{

test: /.scss$/,

loader: ExtractTextPlugin.e...
plugins: [

new HtmlWebpackPlugin({

title: 'Coolblue Edith',

filename: 'index.html',

template: './client/index.html',

...
if (env === 'production') {
config.plugins = config.plugins.concat([

new webpack.optimize.UglifyJsPlugin({
// settings..
...
TRY IT OUT.
https://github.com/ngerritsen/webpack-demo
QUESTIONS?
Upcoming SlideShare
Loading in …5
×

Coolblue Behind the scenes May 2016 - Using Webpack to build Javascript applications

75 views

Published on

At Coolblue we use Webpack to build our most modern Javascript applications. In this presentation I will tell why and show how you can benefit from Webpack yourself.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Coolblue Behind the scenes May 2016 - Using Webpack to build Javascript applications

  1. 1. HOW WE USE WEBPACK. Pack the web. BEHIND THE SCENES MAY 2016
  2. 2. Niels Gerritsen Front-end Developer @ Coolblue @nielsg89
  3. 3. • Javascript build process • Building Javascript? • Using task runners • Webpack • Intro • Demo • How we use it AGENDA.
  4. 4. BUILDING JAVASCRIPT?
  5. 5. A JAVASCRIPT APPLICATION. Files files files. export default num => num + 1 export default msg => console.log(msg) import increment from ‘./increment’ import log from ‘./log’ log(increment(1)) increment.js log.js main.js
  6. 6. BUNDLE. Together we are one. const increment = num => num + 1 const log = msg => console.log(msg) log(increment(1)) bundle.js
  7. 7. TRANSPILE. Like travelling to the past. function increment(num) { return num + 1 } function log(msg) { console.log(msg) } log(increment(1)) bundle.js
  8. 8. MINIFIY. Less is more. function i(n){return n+1};function l(m) {console.log(m)};l(i(1)) bundle.min.js
  9. 9. • ES6 is useful for writing clean code • Minification matters (2 - 8 times smaller files) • At least until HTTP2, bundling is relevant DO WE REALLY NEED THIS? “A JS web application is complex and has a lot of files + libraries”
  10. 10. • Gulp or Grunt • Endless possiblities • Plugins available for everything • Browserify • UglifyJS • Babel USING JAVASCRIPT TASK RUNNERS.
  11. 11. • Manual labor • Lot’s of dependencies • Repetitive work PROBLEM WITH TASK RUNNERS.
  12. 12. • Javascript module bundler • Minimal config • Extensible with Loaders and plugins WEBPACK.
  13. 13. DEMO TIME. 1. Bundle 2. Transpile ES6 3. Minify 4. Add CSS
  14. 14. • For Edith, a modern web app we built with React + Redux • Unique features • Hot reloading • Importing other filetypes • Powerful built in features • Bundle splitting • Path aliasing WHY DO WE USE WEBPACK?
  15. 15. // package.json {{ "name": "coolblue-edith", // other meta data "scripts": { "dist": "NODE_ENV=production webpack", "watch": "NODE_ENV=development webpack", "hot": "NODE_ENV=development webpack-dev-server --hot" }, // dependencies } How do we use webpack?
  16. 16. // webpack.config.js // imports... const env = process.env.NODE_ENV const config = { entry: { app: './client/main.js', vendor: Object.keys(packageJson.dependencies) }, output: { path: './public', filename: 'main.js' }, How do we use webpack?
  17. 17. resolve: { alias: { modules: path.resolve(__dirname, 'modules') base: path.resolve(__dirname, 'client') } }, /* instead of: '../../../client/something' just: 'base/something' */ How do we use webpack?
  18. 18. loaders: [
 {
 test: /.js$/, exclude: /node_modules/, loader: 'babel'
 },
 {
 test: /.scss$/,
 loader: ExtractTextPlugin.extract('css!sass')
 },
 {
 test: /.(png|jpg|svg)$/,
 loader: 'url'
 }
 ], How do we use webpack?
  19. 19. plugins: [
 new HtmlWebpackPlugin({
 title: 'Coolblue Edith',
 filename: 'index.html',
 template: './client/index.html',
 inject: true,
 hash: true
 }),
 new ExtractTextPlugin('style.css'),
 new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), new webpack.DefinePlugin({
 'process.env': {
 NODE_ENV: JSON.stringify(env)
 }
 }) ] } How do we use webpack?
  20. 20. if (env === 'production') { config.plugins = config.plugins.concat([
 new webpack.optimize.UglifyJsPlugin({ // settings.. }), ]) } if (env === 'development') { config.devtool = 'source-map' config.watch = true config.preLoaders: [
 { test: /.js$/, exclude: /node_modules/, loader: 'eslint' }
 ] } module.exports = config How do we use webpack?
  21. 21. TRY IT OUT. https://github.com/ngerritsen/webpack-demo
  22. 22. QUESTIONS?

×