Webpack is een bundelaar voor moderne JavaScript-toepassingen. Hierdoor kunnen ontwikkelaars standalone pakketten samenstellen die op elke browser kunnen worden uitgevoerd.
Volg de onderstaande stappen om Webpack te gebruiken met een React-applicatie:
1. Installeer Node.js en npm: React en Webpack worden beide gebouwd en beheerd via Node.js, dus je zult dat als eerste moeten installeren. Npm (Node Package Manager) wordt meegeleverd bij de installatie van Node.js.
1. Installeer React: Je kunt React installeren met npm met behulp van het volgende commando in je terminal: `npm i react react-dom`
1. Installeer Webpack: Installeren kan met npm door het volgende commando in de terminal te typen: `npm i webpack webpack-cli -D`. Hier installeert het `-D` commando Webpack als een devDependency voor uw applicatie.
1. Installeer Babel: Babel is een tool die je helpt om JavaScript te schrijven dat op veel verschillende browsers werkt. Je kunt Babel installeren met de volgende npm-commando’s:
`npm i babel/core babel-loader babel/preset-env @babel/preset-react -D`
1. Creëer een webpack.config.js bestand in je project root dat Webpack vertelt hoe je applicatie moet worden gebundeld. Hier is een eenvoudig voorbeeld:
```
const path = require(‘path’);
module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘bundle.js’,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’]
}
},
},
],
},
resolve: {
extensions: [‘*’, ‘.js’, ‘.jsx’],
},
};
```
1. In your `package.json`, zorg ervoor dat je een start- en build-script hebt:
```
“scripts”: {
“start”: “webpack —mode development”,
“build”: “webpack —mode production“
},
```
1. Draai `npm start` om uw applicatie te starten.
1. Je moet je “index.html”-bestand bijwerken om naar het gebundelde app-bestand te kraken. Vermeld het volgende in je “index.html”-bestand:
```
Hier staat ‘index.js’ in de ‘src’-directory en wordt het uiteindelijke gebundelde bestand opgeslagen in de ‘dist’-directory. Webpack zal je JavaScript-bestanden met elkaar verknopen en Babel zal ze vervolgens transpileren naar bruikbare code voor de specifieke browserversies die je wilt ondersteunen.
Let op: de bovenstaande instellingen zijn bedoeld voor een eenvoudige React-applicatie. Voor complexere applicaties heb je mogelijk meer plugins, loaders en configuraties nodig in het webpack.config.js-bestand.
