WebPack 2

with Jesús Estévez

@Jecaestevez
Just another simple developer 

What do you remember of 2008  ?

                                                 2008    España

Google "Remember" :

2008 was a good year

Nobody will remember
Jawr 2 in Java included "bundles" !

What do you remember of 2012  ?

                     2012    España

Google "Remember" :

Again 2012 was a good year!

Nobody will remember  ASP.Net 4.5 was released

in 2012

Asp.net 4.5 included a

Bundling feature

Asp.net Bundles

One Year later in 2013

2017  Webpack 2 continue alive!

Time to learn Webpack 2

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

Webpack.config.js

.Babelrc

module.exports = {
  entry: ['./schoolModule.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
   rules: [
     {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
     },
   ],
 },
};
{
  "presets": [
    "env",
  ]
}
  "scripts": {
    "start": "webpack"
  },

package.json

Webpack Boiler Plate (ES6)

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

document.write(messageToDisplay);

schoolModule.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

webpack

>

Webpack Imports (ES6)

export class student{
    constructor(value){
        this.value = `student average score ${value}`;
        this.appendToDoc = () =>{
            document.write(this.value);
        }
    }
}
import { student }  from './schoolModule'

let myComponent = new student("90");
myComponent.appendToDoc();

App.js

schoolModule.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

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

Update webpack.config entry

>

Tired to press f5?

 
npm install webpack-dev-server --save-dev
 
  "scripts": {
    "start": "webpack-dev-server"
  },

package.json

 devServer: {
   port: 8080,
 },

webpack.config.js

>

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

DiY again

Other Developers  will Fork it 

The new C&P

Other Developers will

Text

C&P

"Change or die"

Let Start Building reusable
 "Web Components*"

Angular Todo App

/*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

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,
    }
};
{
  "presets": [
    "env",
  ]
}

webpack.config.js

.babelrc

npm start

Want more?

No problem! All Samples in bit.ly/webpackSamples

by

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

continue pressing f5?

Webpack to rescue

 
npm install html-webpack-plugin --save-dev
 
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var basePath = __dirname;

module.exports = {
  entry: ['./students.js'],
  output: {
    path: path.join(basePath, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  // For development https://webpack.js.org/configuration/devtool/#for-development
  devtool: 'inline-source-map',
  devServer: {
    port: 8080,
  },
  plugins: [
    //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html', //Name of file in ./dist/
      template: 'index.html', //Name of template in ./src
			hash: true,
    }),
  ],
};

Thanks 

and see you all  in  

Materials in:

WebPack2 for dummies

By Jesús Estévez

WebPack2 for dummies

  • 1,101