Natuurlijk! Hier is een stapsgewijze gids om een aangepast JavaScript buildproces op te zetten met Webpack, inclusief code-minificatie, Babel-transpilatie en automatische herlading: 1. Voorbereiding: - Zorg dat Node.js en npm geïnstalleerd zijn op je systeem. - Navigeer in je projectmap via de terminal. 2. Initialiseer npm en installeer benodigde dependencies: ```bash npm init -y npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env html-webpack-plugin ``` 3. Configureer Babel: - Maak een bestand `.babelrc` in je projectroot met: ```json { "presets": ["@babel/preset-env"] } ``` 4. Configureer Webpack: - Maak een bestand `webpack.config.js` in je projectroot met de volgende inhoud: ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', }), ], mode: 'production', // voor minificatie; gebruik 'development' tijdens ontwikkeling devServer: { contentBase: './dist', hot: true, }, optimization: { minimize: true, // zorgt voor code-minificatie }, }; ``` 5. Pas je projectstructuur aan: - Plaats je JavaScript-code in `src/index.js`. - Houd je HTML-bestand (`index.html`) in de root of pas de `HtmlWebpackPlugin`-template aan indien nodig. 6. Scripts toevoegen aan package.json: - Voeg onder "scripts" toe: ```json "scripts": { "build": "webpack --mode production", "start": "webpack serve --open" } ``` 7. Ontwikkeling en automatische herlading: - Voer `npm run start` uit voor ontwikkelingsserver met hot reloading. 8. Productie build: - Voer `npm run build` uit voor een geoptimaliseerde, minified bundel in de `dist/` map. 9. Test je setup: - Open je browser op de localhost URL die webpack-dev-server aanbiedt en controleer of alles correct werkt. Door deze stappen te volgen, heb je een gestructureerd buildproces met code-minificatie, Babel-transpilatie en automatische herlading voor je project.

Zeker, ik begeleid je stap voor stap bij het opzetten van een aangepast JavaScript-buildproces met Webpack. Hier is een gedetailleerde handleiding: ### Stap 1: Projectinitialisatie 1. Open je terminal in de hoofdmap van je project. 2. Voer uit: ```bash npm init -y ``` ### Stap 2: Webpack en dependencies installeren Installeer de benodigde packages: ```bash npm install --save-dev webpack webpack-cli webpack-dev-server npm install --save-dev @babel/core @babel/preset-env babel-loader npm install --save-dev html-webpack-plugin css-loader style-loader npm install --save-dev terser-webpack-plugin ``` ### Stap 3: Bestandstructuur aanmaken Je projectstructuur zou er zo uit moeten zien: ``` project/ ├── src/ │ ├── index.js │ └── (andere bronbestanden) ├── dist/ │ └── (gegenereerde bestanden) ├── index.html └── package.json ``` ### Stap 4: Webpack-configuratie maken Maak een bestand `webpack.config.js` in de hoofdmap: ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { // Invoerpunt entry: './src/index.js', // Uitvoerconfiguratie output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.[contenthash].js', clean: true }, // Development modus mode: 'development', // DevServer configuratie devServer: { static: './dist', hot: true, open: true, port: 8080 }, // Module regels module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/i, use: ['style-loader', 'css-loader'] } ] }, // Plugins plugins: [ new HtmlWebpackPlugin({ template: './index.html', minify: true }) ], // Optimalisatie optimization: { minimize: true, minimizer: [new TerserPlugin()], }, // Source maps voor debugging devtool: 'source-map' }; ``` ### Stap 5: Babel-configuratie Maak een `.babelrc` bestand: ```json { "presets": ["@babel/preset-env"] } ``` ### Stap 6: NPM-scripts toevoegen Voeg deze scripts toe aan je `package.json`: ```json "scripts": { "build": "webpack --mode production", "dev": "webpack serve --mode development", "start": "webpack serve --mode development" } ``` ### Stap 7: Je HTML aanpassen Zorg dat je `index.html` een leeg script element heeft of verwijder eventuele hardcoded script-referenties: ```html <!DOCTYPE html> <html> <head> <title>Mijn Project</title> </head> <body> <div id="app"></div> <!-- Webpack injecteert automatisch scripts --> </body> </html> ``` ### Stap 8: Het proces gebruiken - **Development server starten**: ```bash npm run dev ``` Dit start een server op `http://localhost:8080` met hot reload. - **Productiebuild maken**: ```bash npm run build ``` Dit creëert geoptimaliseerde bestanden in de `dist/` map. ### Extra opties: - Voor CSS preprocessing kun je `sass-loader` toevoegen - Voor afbeeldingsoptimalisatie: `image-webpack-loader` - Voor code splitting: gebruik `SplitChunksPlugin` ### Belangrijkste functies in deze setup: 1. **Transpilatie**: Babel zet moderne JS om naar compatibele code 2. **Minificatie**: Terser minimaliseert je code 3. **Hot Reload**: Wijzigingen laden automatisch in de browser 4. **Cache busting**: Content hashes in bestandsnamen 5. **Source maps**: Voor eenvoudige debugging Je kunt de configuratie verder aanpassen naar je specifieke behoeften!