Scribd Logo
Hochladen

Willkommen bei Scribd!

  • 1 Webpack Fundamentals m1 Slides

    Hochgeladen von

    Darko Paunovic
    20 Ansichten25 Seiten
    webpack

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    webpack

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    20 Ansichten25 Seiten

    1 Webpack Fundamentals m1 Slides

    Hochgeladen von

    Darko Paunovic
    webpack

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 25

    Webpack Fundamentals

    Introduction

    Joe Eames
    @josepheames | www.joeeames.me
    Course Overview

    Introduction
    Basic Builds
    Advanced Builds
    Tools
    Specific Builds
    Who Should Watch This Course?

    Front End Web Developers


    Course Repo

    https://github.com/joeeames/WebpackFundamentalsCourse
    Why Do We Need a Build?

    ?
    Multiple Web Requests

    Browser Server
    Code Size
    function rockOut(guitar) {
    if(guitar.canShred) {
    guitar.shred();
    } else {
    guitar.play();
    }
    }
    Minified
    function
    rockOut(guitar){if(guitar.canShred){guitar.shred();}else{g
    uitar.play();}}
    Really Minified
    function rockOut(c){c.canShred?c.shred():c.play()}
    File Order Dependencies
    <head>
    <script src=“members.js”></script>
    <script src=“bands.js”></script>
    </head>
    Transpilation
    function playSolo(drums, duration = 5) {
    drums.startSolo();
    setTimeout(function() {
    drums.endSolo();
    }, duration * 60000);
    }
    Linting
    function tune(lead, bass, keyboard) {
    lead.tune()
    bass.tune()
    }
    Why Do We Need a Build?

    Combining Files
    Minifying Files

    ? Maintaining File Order


    Transpilation
    Linting
    Server-Side Tools
    Other ASP.NET, Rails, etc.
    Solutions Task Runners
    Grunt, Gulp, etc.
    Server-Side Build Tools

    File1.js

    File2.js
    Browser Minification &
    Concatenation File1.css

    File2.css
    Task Runners

    File1.es6 File1.js
    File.js MinFile.js
    File2.es6 File2.js
    Browser
    File1.scss File1.css
    File.css MinFile.css
    File2.scss File2.css
    Webpack

    File1.es6 File1.js
    File.js MinFile.js
    File2.es6 File2.js
    bundle.js Browser
    File1.scss File1.css
    MinFile.cs
    File.css
    s
    File2.scss File2.css
    Webpack Use NPM not Bower
    Conventions Use a Module System
    Module Systems
    Backbone.j
    jQuery.js Lodash.js
    s

    Members.j
    s

    Bands.js

    Albums.js Concerts.js
    Module Systems

    Members.j
    s

    Bands.js

    Concerts.js
    Module Systems
    Backbone.j
    jQuery.js Lodash.js
    s

    Members.j
    s

    Bands.js

    Albums.js Concerts.js
    Concerts.js
    var bands = require(‘./Bands’);
    var Backbone = require(‘Backbone’);
    var Lodash = require(‘Lodash’);

    // code
    Module Systems
    Backbone.j
    jQuery.js Lodash.js
    s

    Members.j
    s

    Bands.js
    Bands.js
    var $ = require(‘jQuery’);
    var members = require(‘./Members’);

    // code
    Summary

    Introduction
    The Need for a Build
    Alternate Solutions
    Webpack
    Module Systems

    Das könnte Ihnen auch gefallen