Heeft u ooit Babel ingesteld? Wat is dat? Heeft u ooit Webpack gebouwd of alternatieven gebruikt?

Babel is een transpiler die moderne JavaScript (ES6+) omzet in een oudere standaard die door de meeste browsers wordt ondersteund. Het wordt geconfigureerd via een configuratiebestand (bijvoorbeeld .babelrc), waarin presets en plugins worden aangegeven voor de benodigde transformaties.

Webpack is een module bundler die verschillende bronnen (JS, CSS, afbeeldingen) combineert tot geoptimaliseerde bundels voor de browser. De configuratie stelt je in staat om entry-punten, loaders voor verschillende bestandstypen en plugins voor optimalisatie in te stellen.

Alternatieven voor Webpack zijn bijvoorbeeld Rollup, Parcel of Vite, die eenvoudiger te configureren zijn of sneller werken.

Voorbeeld van een eenvoudige Babel-configuratie (.babelrc):

{
  "presets": ["@babel/preset-env"]
}

Voorbeeld van een basis Webpack-configuratie (webpack.config.js):

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};