Base demo app for 11ty + webpack + nunjucks
This is kind a boilerplate or example solution
Generated by gh-pages. Branch with dist files available here.
You can't use eleventy --serve flag. Need to use some other serving on our local machine like me - http-server
Base config files:
./webpack.common.js
./.eleventy.js
Dependencies from devDependencies are required only for this repo purposes. When coding your website based on this example you can simply delete them.
To develop things on local you just need to install dependencies and run command:
yarn dev
It runs for us watching files on webpack and watching changes in nunjucks eleventy pages.
Building chunks on webpack runs as usuall. We are giving standard entrypoints to our files, pointing HtmlWebpackPlugin to our html files and extracting css to separate files.
IMPORTANT!
However this solution requires one more trick from 11ty. We are building our .html static sites to ./eleventySites directory instead of ./dist. The first simplest disadvantage is that we have an unnecessary file on our build directory. The other one is that's b/c of infinite build loop for eleventy html files in dist which makes it impossible to work with app.
./src- contains all scripts of our app. Files in the root represents views or main JS entrypoint. Files in sub directory represents modules imported in view files. Created for building vendor bundles./styles- simply contains styles for our whole app and specified styles only for gallery page./site/*.njk- files with content to our views./site/error.njk- content for 404.html page./site/_includes/base.njk- our base layout for sites./site/_includes/**/*.njk- partials and macros of example app./site/_data- here we contains predefined data for sites, can contain data fetched from API also