eleventy-webpack 🎈

A barebone eleventy and webpack template. Fork and go.

Included

• Barebone eleventy (literally 😱)
• Fast build with per env configs (babel-env, postcss-preset-env, webpack...)
• .js (ES6, Babel and its polyfills)
• .css (Sass, Autoprefixer)
• Prettier for formatting

Live demo https://eleventy-webpack.netlify.app

Usage

First install the dependencies:

npm install

Then you can:

Command	Description
npm run start	Run your website on http://localhost:8080
npm run build	Build your production website inside /dist
npm run format	Run prettier on all filles except /dist
npm run analyze	Output info on your bundle size

That's it.

eli5 (explain like i'm 5)

Webpack is used when:

1. Any changes to assets/scripts or assets/styles is watched and rebuilt by webpack.
2. The new files are appended to the ignored file _includes/webpack.njk thanks to html-webpack-plugin.
3. Eleventy sees the new _includes/webpack.njk and rebuild.

Any other changes is picked up normally by Eleventy (see .eleventy.js)

Thanks

• https://github.com/maxboeck/mxb
• https://github.com/ianrose/deventy
• https://github.com/planetoftheweb/seven
• https://github.com/scottwater/eleventy-origin