WebPack 2

with Jesús Estévez

@Jecaestevez
Just another simple developer

What is Webpack?

Just a module bundler

Why do you need a module bundle ?

Manage many files
Concatenate files
Minification
Cache
Unused code
Script dependency

7. Isolate scopes

8. Lazy loading

9. Scripts ordering

10. Compression

11.Time

12. Documentation

Is it now trending all this kind of technologies ?

In 2008
Jawr 2 in Java included "bundles" !

http://bit.ly/jawrJava

ASP.Net 4.5 was released

in 2012

Asp.net 4.5 included a

Bundling feature

bit.ly/webPack1Release

One Year later in 2013

2017 Webpack 2 continue alive!

http://bit.ly/WebpackAlive

Why Wepack?

To rule them all

Do you use any of this:

Let's imagine you don't
and you need create Javascript bundle

bit.ly/ECMAScript2016

Webpack Boiler Plate (ES5)

bit.ly/WebpackBoilerPlate

npm init

 npm install webpack --save-dev

  "devDependencies": {
    "webpack": "^2.2.1"
  }

package.json

Webpack.config.js

module.exports = {
  
};

1st Install:

Webpack Boiler Plate (ES5)

bit.ly/WebpackBoilerPlate

Webpack.config.js

module.exports = {
  entry: {
    app: ['./src/todoComponent.js'],
  },
  output: {
    filename: './dist/bundle.js',
  },
};

Webpack Boiler Plate (ES5)

bit.ly/WebpackBoilerPlate

//src/todoComponent.js

var name= "Webpack2";
var done = false;

var value = name + " -> " + done;

document.write(value);

todoComponent.js

<html>
    <head>
    </head>
    <body>
         <h1>My to do List!</h1>
        <script src="dist/bundle.js">
        </script>
    </body>
</html>

/* 0 */
/***/ (function(module, exports) {

var name ="Webpack2";
var done = false;
var value = name + " -> " + done;

document.write(value);

/***/ }),

bundle.js

Use bundle.js in .html

webpack

index.html

Do you want to use ?

Transpiler

bit.ly/es6compatibility

Webpack Boiler Plate (ES6)

 npm install babel-preset-env --save-dev

bit.ly/WebpackBoilerPlate

npm install babel-core --save-dev

npm install babel-loader --save-dev

  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-env": "^1.1.11",
    "webpack": "^2.2.1"
  }

package.json

.Babelrc

{
  "presets": [
    "env",
  ]
}

Webpack Boiler Plate (ES6)

bit.ly/WebpackBoilerPlate

Webpack.config.js

module.exports = {
  entry: {
    app: ['./src/todoComponent.js'],
  },
  output: {
    filename: './dist/[name]_bundle.js',
  },
  module: {
   rules: [
     
   ],
 },
};

Webpack Boiler Plate (ES6)

bit.ly/WebpackBoilerPlate

Webpack.config.js

module.exports = {
  entry: ['./src/todoComponent.js'],
  output: {
    filename: './dist/[name]_bundle.js',
  },
  module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
     },
   ],
 },
};

Webpack Boiler Plate (ES6)

bit.ly/WebpackBoilerPlate

const name= "Webpack2 + ES6 + Babel";
const done= false;

const value = `${name} -> ${done}`;

document.write(value);

todoComponent.js

<html>
    <head>
    </head>
    <body>
           Todo List!  
        <script src="dist/todoComponent_bundle.js">
        </script>
    </body>
</html>


/***/ (function(module, exports, __webpack_require__) {


"use strict";


var name = "Webpack2 + ES6 + Babel";
var done = false;

var value = name + " -> " + done;

document.write(value);

bundle.js

Use bundle.js in .html

webpack

Webpack Imports (ES6)

bit.ly/webpackImportES6

export class item{
    constructor(val,done){
        this.name = val;
        this.done = done;

        this.value = `${val} ->  ${done} `;
        
        this.appendToDoc = () => {
            document.write(this.value);
        }
    }
}

import { item }  from './todoComponent'

const name = "Webpack2 + ES6 + Babel";
let myComponent = new item(name ,true);
myComponent.appendToDoc();

App.js

todoComponent.js

<html>
    <head>
    </head>
    <body>
        <h1> My to do list </h1>
        <script src="./dist/app_bundle.js">
        </script>
    </body>
</html>

"use strict";


var _todoComponent = __webpack_require__(1);

var name = "Webpack2 + ES6 + Babel";
var myComponent = new _todoComponent.item(name, true);
myComponent.appendToDoc();

var item = exports.item = function item(val, done) {
    var _this = this;

    _classCallCheck(this, item);

    this.name = val;
    this.done = done;

    this.value = val + " ->  " + done + " ";

    this.appendToDoc = function () {
        document.write(_this.value);
    };
};

webpack

bundle.js

Update src bundle in .html

module.exports = {
  entry: ['./app.js'],

Update webpack.config entry

Which key do you think could be the most pressed by a web developer?

npm install webpack-dev-server --save-dev

  "scripts": {
    "start": "webpack-dev-server"
  },

package.json

 devServer: {
   port: 8080,
 },

webpack.config.js

Tree shaking

{
  "presets": [
    [
      "env",
      {
        "modules": false,
      },
    ],
  ]
}

  "scripts": {
    "start": "webpack-dev-server",
    "build:dev": "webpack",
    "build:prod": "webpack -p"
  },

npm run build:prod

.babelrc

package.json

bit.ly/webpack2TreeshakingNoteffective

bit.ly/webpack2Treeshaking

How will you re-use
a feature in a WebApp?

DiY again

Other Developers will Fork it

bit.ly/gitGuitar

The new C&P

Other Developers will

C&P

"Change or die"

Let Start Building reusable
"Web Components*"

bit.ly/changeOrDie

Angular Todo App

bit.ly/angularTodoApp


<form ng-submit="todoAdd()">
    <input type="text" ng-model="todoInput" 
    size="50" placeholder="Add New">
    <input type="submit" value="Add New">
</form>
<br>
<div ng-repeat="x in todoList">
    <input type="checkbox" ng-model="x.done"> 
    <span ng-bind="x.name"></span>
</div>

//src/app.js
import {todoComponent}    from './todoComponent'
import * as angular from 'angular'

var app = angular.module('myTodoApp', []);
app.component('todoComponent', todoComponent);

//src/todoComponent.js
export class item{
    constructor(val,done){
        this.name = val;
        this.done = done;
        this.value = `${val} ->  ${done} `;

        this.appendToDoc = () => { document.write(this.value); }
    }
}

function todoCtrl($scope) {
    $scope.todoList = [];

    $scope.todoAdd= () => {
        let newItem = new item($scope.todoInput, false);
        $scope.todoList.push(newItem);
        $scope.todoInput = "";
    };
};
export const todoComponent = {
  template: require('../template.html'),
  controller:todoCtrl
}


<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body ng-app="myTodoApp" >
    <h2>My to do list</h2>
    <todo-component />
    <script src="dist/app_bundle.js"></script>
  </body>
</html>

Angular Webpack Todo App

npm init

npm install webpack --save-dev

npm install babel-core --save-dev
npm install babel-preset-env --save-dev

npm install babel-loader --save-dev
npm install webpack-dev-server --save-dev

npm install angular --save

module.exports = {
    entry: {
        app: ['./src/app.js'],
        vendor: [
            'angular',
        ]
    },
    output:{
        filename:'dist/[name]_bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
        ]
    },
    devServer: {
       port: 8080,
    },
};

Add Angular library to vendors in webpack.config.js

Previously

Angular Webpack Todo App

bit.ly/angularWebpackTodoApp

bit.ly/angularWebpackTodoAppCode

bit.ly/todoNgWebpackBundleJs

module.exports = {
    entry: {
        app: ['./src/app.js'],
        vendor: [
            'angular',
        ]
    },
    output:{
        filename:'dist/[name]_bundle.js'
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'raw-loader',
            },
        ]
    }
};

webpack.config.js

npm start