Setup

First we installed 11ty as explained on their website and made some layouts.

Install webpack encore

npm install @symfony/webpack-encore

Setup webpack encore

Next up, setup a basic webpack encore. You can follow along with the example. They explain a lot, but i ended up with a configuration like this.

const Encore = require('@symfony/webpack-encore');

Encore
  .setOutputPath('build/')
  .setPublicPath('/eleventy-encore/build')
  .setManifestKeyPrefix('build')
  .addEntry('app', './js/app.js')
  .enableSingleRuntimeChunk()
  .enableSourceMaps(!Encore.isProduction())
  .enableSassLoader()
  .autoProvidejQuery()
;

if (Encore.isProduction()) {
  Encore
    .cleanupOutputBeforeBuild()
    .enableVersioning()
  ;
}

module.exports = Encore.getWebpackConfig();

I did add some flair using bootstrap and font awesome.

npm i bootstrap jquery popper.js @fortawesome/fontawesome-free

As it says we have our source in js/app.js

import '../scss/app.scss';
import 'popper.js';
import 'bootstrap';

And thus include the css scss/app.scss

@import "~bootstrap/scss/bootstrap";
@import "~prism-themes/themes/prism-darcula.css";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";