WebPack 2

with Jesús Estévez

@Jecaestevez
Just another simple developer

What do you remember of 2012 ?

2012 2012 España

Google "Remember" :

2012 phenomenons

bit.ly/2012-yr

Nobody will remember ASP.Net 4.5 was released

in 2012

Asp.net 4.5 included a

Bundling feature

Asp.net Bundles

Text

bit.ly/webPack1Release

One Year later

2017 Webpack 2 continue alive!

http://bit.ly/WebpackAlive

Time to learn Webpack 2

bit.ly/webpackSamples

with @Lemoncode Samples

Webpack Boiler Plate (ES6)

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

bit.ly/WebpackBoilerPlate

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

module.exports = {
  entry: ['./students.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
     },
   ],
 },
};

Webpack.config.js

.Babelrc

Webpack Boiler Plate (ES6)

bit.ly/WebpackBoilerPlate

const averageScore = "90";
const messageToDisplay = `average score ${averageScore}`;

document.write(messageToDisplay);

student.js

<html>
    <head>
    </head>
    <body>
           Hello Webpack 2!  
        <script src="bundle.js"></script>
    </body>
</html>


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

"use strict";


// Let's use some ES6 features
var averageScore = "90";
var messageToDisplay = "average score " + averageScore;

document.write(messageToDisplay);

bundle.js

Use bundle.js in .html

npm webpack

Webpack Imports (ES6)

bit.ly/webpackImportES6

export class webComponent{
    constructor(value){
        this.value = `average score ${value}`;
        this.appendToDoc = () =>{
            document.write(this.value);
        }
    }
}

import * as c from './webComponent'

let myComponent = new c.webComponent("90");
myComponent.appendToDoc();

App.js

webComponent.js

<html>
    <head>
    </head>
    <body>
        WebPack Boiler Plate  
        <script src="bundle.js"></script>
    </body>
</html>

var webComponent = exports.webComponent =
 function webComponent(value) {
    var _this = this;

    _classCallCheck(this, webComponent);

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

npm start

bundle.js

Use bundle in .html

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

Text

C&P

"Change or die"

Let Start Building reusable
"Web Components*"

bit.ly/changeOrDie

Angular Todo App

bit.ly/angularTodoApp

/*template.html*/
<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.todoText"></span>
</div>
<p><button ng-click="remove()">Remove marked</button></p>

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

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

//src/todoComponent.js
function todoCtrl($scope) {
    $scope.todoList = [{todoText:'Learn Angular 4', done:false}];

    $scope.todoAdd = function() {
        $scope.todoList.push({todoText:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.remove = function() {
        var oldList = $scope.todoList;
        $scope.todoList = [];
        angular.forEach(oldList, function(x) {
            if (!x.done) $scope.todoList.push(x);
        });
    };
};
export const todoComponent = {
  template: require('../template.html'),
  controller:todoCtrl
}

/*index.html*/
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body ng-app="myTodoApp" >
    <h2>My Todo List</h2>
    <todo-component />
    <script src="dist/app_bundle.js"></script>
  </body>
</html>

Angular Webpack Todo App

bit.ly/angularWebpackTodoApp

bit.ly/angularWebpackTodoAppCode

bit.ly/todoNgWebpackBundleJs

npm init

npm install webpack --save-dev

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

npm install raw-loader --save-dev

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

npm install babel-loader --save-dev
npm install angular --save

var webpack = require('webpack');

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',
            },
        ]
    },
    devServer:{
        port:8080,
    }
};