Bundler moduler for nettleseren

                                
    feed.html:
    <script src="feed-bundle.js"> </script>

    profile.html:
    <script src="profile-bundle.js"> </script>
                                
                            

• Eksempel på bundlingen. Avhengighetsgraf for en woop-lignende app
• Feed og brukerprofil er separate sider eller entry points.
• Uten konfig: webpack genererer flate JavaScript-filer ut av grafen. sånn at denne modulariserte kode som er grei å jobbe med -> kan tolkes av en nettleser.
• Vel og bra dette. Men webpack er kraftig, kan optimalisere

Optimalserte bundles

                                
    feed.html:
    <script src="feed-bundle.js"> </script>
    <script src="common.js"> </script>

    profile.html:
    <script src="profile-bundle.js"> </script>
    <script src="common.js"> </script>
                                
                            

• sier til webpack at vi vil slå sammen kode som deles av flere sider i appen. så vi webpack se ut ifra grafen...
• Webpack vil dermed kunne bunte disse sammen
• Fellesbundelen vil caches.
• Hvis sammenslåingen gjøres er det fordi optimizern mener flere requests er bedre enn én stor fil
• Gylden middelvei
• Er ikke sikkert felleskode blir separert ut

Importer hva som helst

main.js:

                        
require('./style.scss');

var imgElement = document.createElement('img');

imgElement.src = require('./image.png');

document.body.appendChild(imgElement); 
                        
                    

• Ikke på forrige slide. Avhengighetsgrafen til webpack er ikke forbeholdt javascript.
• Ser kanskje litt rart ut men importerer sass
• Tilsvarende mulig å importere png bildefil
• For at webpack skal forstå spesiell bruk av require... bruker noe som i webpack verden kaller for loaders...

webpack.config.js:

                        
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      {test: /\.scss$/, loader: "style!css!sass"},
      {test: /\.png$/, loader: "url-loader?limit=10000"}
    ]
  }
};
                        
                    

• Hvordan forskjellige filtyper håndteres...
• Her ser dere konfigen for koden på forrige slide.
• Og har to loaders. første lar oss importere sass andre png-bilder
• for bilder under 10kb inlines som base64 string, hvis ikke brukes en referanse

Single page apps

• God brukeropplevelse, men byr på utfordringer:

Loading

• Webpack kan også gjøre en jobb for oss når det kommer til single page apps
• Det vi så istad var jo en multi page app, hvor vi hadde flere entry points. Her er det snakk om en app med et enkelt entry point hvor ulike deler av appen lastes ned asynkront...
• Så kjennetegnet for mange Single page apps er at de har en ganske høy initial load, hvor en eller flere store filer ...
• En løsning på det her er å isteden for å hente alle assets i dét siden laster...

Asynkron lasting av moduler

                        
// Front-end router
window.onpopstate = function() {
    showLoadingIndicator();
    if (window.location.pathname === '/profile') {
        require.ensure([], function() {
            hideLoadingIndicator();
            require('./pages/profile').show();
        });
    } else if (window.lcation.pathname === '/feed') {
        require.ensure([], function() {
            hideLoadingIndicator();
            require('./pages/feed').show();
        });
    }
}
                        
                    

• Til det her bruker webpack require.ensure
• En asynkron variant av den vanlige require-funksjonen i CommonJS, og brukes typisk i en front-end ruter..
• Laste ned forskjellige deler av appen avhengig av URL
• I den øverste if-setningen sier vi til appen vår at når vi får inn profil-URLen så skal du prøve å hente inn profil-bundelen...
• Under overflaten – legger inn kode som gjør asynkrone HTTP requests
• Slipper å forholde seg til dette
• Webpack velger om det skal legge i egne filer eller pakkes sammen med eksisterende bundles.