Use a different folder structure

[radum]

.
├── package.json
├── .eleventy.js
├── site
|     └ assets
|     └ (general page files)
└── src
      └ *.scss
      └ *.js

• Webpack - (Basic Config)

  • Pre-processed files are saved + edited in the src dir.
  • Webpack outputs asset files to site/assets dir.

• Eleventy

  • Use addPassthroughCopy to include our post-processed assets site/assets in the build.
  • 11ty ignores anything in .gitignore (aka your webpack assets) so we use setUseGitIgnore(false) to rely on .eleventyignore instead.

/* .eleventy.js */

module.exports = eleventyConfig => {
  eleventyConfig.addPassthroughCopy("site/assets");
  eleventyConfig.setUseGitIgnore(false); 
};

NPM Scripts

For development, use a node package like npm-run-all to run webpack + 11ty in parallel (both in watch mode)

/* package.json */

  "scripts": {
    "start": "run-s webpack-prod eleventy",
    "dev": "run-p webpack-dev eleventy-dev",
    "eleventy": "eleventy --input=site --output=public",
    "eleventy-dev": "eleventy --input=site --output=public --watch --serve",
    "webpack-prod": "webpack --mode production --env.production",
    "webpack-dev": "webpack --mode development --env.production=false --watch"
  },