Skip to main content

Webpack

>>>>>>>>>>>>>>>>>>>>>>Wat betekent Webpack?

Webpack is een zogenaamde “codebundler”, die vooral wordt gebruikt om verschillende Javascriptbestanden samen te voegen voor gebruik in de browser.

Code opsplitsen en JavaScript

De runtime-omgeving NodeJS, in het kader waarvan JavaScript aan de serverzijde kan worden gebruikt, heeft het opsplitsen van JavaScript-code in modules met behulp van CommonJS van meet af aan ondersteund. CommonJS maakt het mogelijk om code op te splitsen in afhankelijke modules en deze onafhankelijk van elkaar te laden wanneer dat nodig is. Het opsplitsen in onafhankelijke modules en het splitsen van de code gebeurt hoofdzakelijk met het oog op een betere beheersbaarheid en een gemakkelijker beheer van de programmacode. Dit is een gebruikelijke engineeringpraktijk die al tientallen jaren wordt toegepast in diverse programmeertalen, zoals Java, C++ of Python. Het maakt niet uit in welke webbrowser JavaScript wordt gebruikt, de scripttaal ondersteunt het splitsen van code niet.

Modules voor de webbrowser

Dit is waar Webpack in het spel komt. Codebundler biedt ondersteuning voor het splitsen van code in de webbrowser door onafhankelijke modules op verzoek te laden alsof ze bedoeld zijn voor gebruik in een NodeJS-omgeving. De gemodulariseerde code wordt eerst geanalyseerd en verwerkt door Codebundler, waarna het wordt gebruikt om een pakket te maken dat dynamisch kan worden geladen wanneer dat nodig is. Bovendien stelt de bundler ons in staat om npm-pakketten als modules te gebruiken, zoals jQuery of React. Deze hoeven dan niet als afzonderlijke scripts in het HTML-document te worden ingebed, wat tal van voordelen biedt, zoals:

  • geen globale variabelen
  • geen uitsloverij
  • de code wordt veel beter beheersbaar en voorspelbaar

Configuratie van Webpack

De configuratie wordt gerealiseerd in de vorm van een NodeJS-module die een zogenaamd “Config-object” exporteert. Het kan om het even welke Javascriptcode bevatten, wat een waaier van mogelijkheden opent voor ontwikkelaars. Zo kan bijvoorbeeld een invoerbestand voor de Codebundler dynamisch van het bestandssysteem worden geladen wanneer dat nodig is. Het configuratie-object bevat vier belangrijke sleutelwoorden:

Ingang

Dit zijn de invoerinstellingen. Hiermee kunnen ontwikkelaars Codebundler precieze instructies geven over waar te beginnen met het maken van pakketten. Voorbeeld van een invoerconfiguratie:

/module.exports={
/context:path.resolve(__dirname),
/entry: [‘./index.js’,
/entry: [‘./index.js’, ‘./login.js’],
/entry: {
/index: ‘./index.js’,
/login: ‘./login.js’,
/},
/}

Uitgang

Dit is een object met toetsen om de uitvoer van Webpack te regelen. Voorbeeld voor Output-Config:

/module.exports={
/context:path.resolve(__dirname),
/entry: [‘./index.js’,
/entry: [‘./index.js’, ‘./login.js’],
/entry: {
/index: ‘./index.js’,
/login: ‘./login.js’,
/},
/output:{
/path:path.join(__dirname,’build’),
/publicPath:’/’,
/filename:’bundle.js’,
/filename: ‘[naam].js’,
/filename: ‘[chunkhash].js’,
/}
/}

Lader

Dit zijn transformaties die kunnen worden gebruikt om de configuratie van afzonderlijke modules aan te passen voordat zij tot een pakket worden samengevoegd. Voorbeeld van het gebruik van een lader:

/module.exports={
/module:{
/rules:[
/{
/test:/.js$/
/gebruik:[
/{
/loader:[ /{ babel-loader,
/options:{
/presets:[ ‘react’]
/}
/}
/]
/},
/{
/test:/.sass$/,
/gebruik:[
/{
/loader: “style-loader”,
/},
/{
/loader:’css-loader’,
/},
/{
/loader:’sass-loader’,
/}
/]
/}
/]
/}
/}

Plug-ins

Plug-ins zijn transformaties die per pakket worden toegepast. Ze worden bijvoorbeeld gebruikt voor functionaliteiten die niet door de Loader worden ondersteund. Voorbeeld van een plug-in configuratie:

/module.exports={
/plugins:[
/newExtractTextPlugin({
/naam:’bundle.css’
/}),
/newwebpack.optimize.UglifyJsPlugin({
/minimize:true
/}),
/]
/}

Conclusie van het OM Optimiser team

Webpack is een codebundler die modularisering van programmacode op frontend-niveau mogelijk maakt, wat bijdraagt tot een betere beheersbaarheid en een eenvoudiger beheer van programmacode.

Heeft u nog vragen?

Neem contact met ons op


Verdere inhoud