Skip to main content
Version: v5 (Preview)

Webapp Output Target: www

The www output target type is oriented for webapps and websites, hosted from an http server, which can benefit from prerendering and service workers, such as this very site you're reading. For a walkthrough, see Using Stencil for an Application.

Even if a project is meant to only build a reusable component library, the www output target is useful to build out and test the components throughout development.

outputTargets: [
{
type: 'www'
}
]

Config​

PropertyDescriptionDefault
baseUrlThe baseUrl represents the site's "base" url to be served from. For example, this site's base url is https://stenciljs.com/. However, if the entire site's output is to live within a sub directory, then this directory's path should be the baseUrl. For example, Ionic's documentation is a stand-alone Stencil site that lives in the /docs directory within https://ionicframework.com/. In this example, https://ionicframework.com/docs/ would be the base url./
buildDirThe buildDir is the directory of Stencil's generated scripts, such as the component files.build
bundleModeChooses how components are bundled for this output. 'loader' uses the loader-bundle architecture: chunk-split, loaded lazily via a loader script. 'standalone' uses one module per component with an auto-loader instead - simpler, easier to debug. Defaults to 'standalone' only if a standalone output target is configured and no loader-bundle is; otherwise defaults to 'loader'.'loader' (auto-detected)
copyAn array of copy tasks to run during the build, in addition to the assets/manifest.json files Stencil already copies automatically.undefined
dirThe dir config specifies the public web distribution directory. This directory is commonly the root directory of an app to be served, such as serving static files from. This directory is built and rebuilt directly from the source files. Additionally, since this is a build target, all files will be deleted and rebuilt after each build, so it's best to always copy source files into this directory. It's recommended this directory is not committed to a repository.www
emptyBy default, before each build the dir directory will be emptied of all files. However, to prevent this directory from being emptied change this value to false.true
hashedFileNameLengthNumber of characters to use for the content hash in filenames, when hashFileNames is enabled.8
hashFileNamesHash the filenames of generated chunks based on their content, enabling forever-caching of CDN-served bundles.true in production, false in dev
indexHtmlThe indexHtml property represents the location of the root index html file.index.html
prerenderConfigPath to a module exporting prerender hooks (beforeSsr, afterSsr) run against each prerendered page. See Prerender Config.undefined
serviceWorkerService worker config for production builds - null by default, so nothing is generated unless you opt in. Set to true to generate one with default settings, or provide a config object to customize it; any values you provide override Stencil's defaults, per the Workbox documentation. In development mode, a script that deregisters any existing service worker is always injected instead.null (disabled)
skipInDevNot read by the www output target - this output always runs, in dev and production alike, regardless of this setting.n/a