Stencil Config

The stencil.config.js file is where all Stencil configuration happens.

Here's an example configuration:

exports.config = {
  bundles: [
    { components: ['stencil-site', 'site-header', 'landing-page'] },
    { components: ['getting-started', 'code-splitting', 'stencil-ssr', 'site-menu'] },
    { components: ['demos-page'] }
  ],
  collections: [
    { name: '@stencil/router' }
  ],
  serviceWorker: {
    globPatterns: [
      '**/*.{js,css,json,html,ico,png,jpeg}'
    ],
    globIgnores: [
      'build/app/svg/*.js'
    ]
  },
  copy: [
    { src: 'images' },
    { src: 'styles', dest: 'css' }
  ]
};

Config entries

The bundles config is an array of objects that represent how components are grouped together in lazy-loaded bundles. It is important to note that every Stencil component be included in a bundle. In the example above, each object in the bundles array has its own components array, which is the HTML tag name for each component. In general, the simplest approach is to give each component its own bundle. A more advanced optimization would be grouping commonly used components together.

The collections config specifies a list of third-party Stencil libraries. Since everything in Stencil is async and lazy loaded by default, it is important to NOT have any hard import statements linking components together. Any library listed in the list collections entry will be recognized and included in the application by the Stencil compiler. By default, the @stencil/router will be included.

The srcDir config specifies the source directory.

The wwwDir config specifies the public web distribution directory. This directory is commonly the root directory for a server, where all static files can be served. This directory is built and rebuilt directly from the source files. We recommend this directory is not committed to a repository.

The buildDir config specifies where stencil's build files are saved after each build. These are the generated scripts which will be requested by the browser. The build direcory should be relative to the wwwDir setting.

The publicPath config sets the client-side base path for all Stencil build assets, and it's usually best to have it start with /. Note that this only sets the base path the browser requests, but this does not set where files are saved during build. To change where files are saved at build time, use the buildDir config.

The serviceWorker config lets you customize the service worker that gets automatically generated by the Stencil compiler. You can set any of the values listed here in the Workbox documentation, to override our default service worker settings.

The copy config is an array of objects that define any files or folders that you would like to get copied over to your buildDir when a build is performed. Each object in the array must include a src property which can be either an absolute path, a relative path or a glob pattern. You can also provide the optional dest property which can be either an absolute path or a path relative to your buildDir.