{"id":2047,"date":"2017-11-09T17:34:02","date_gmt":"2017-11-09T17:34:02","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=2047"},"modified":"2017-11-09T17:34:02","modified_gmt":"2017-11-09T17:34:02","slug":"using-webpack-with-web-components-built-using-stencil","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil","title":{"rendered":"Using Webpack with Web Components Built Using Stencil"},"content":{"rendered":"

Many applications are built using Webpack<\/a>. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application.<\/p>\n

Please note that the Webpack plugin is not required to use web components built with Stencil in other applications. This plugin just gives you an option to use if your application relies heavily on Webpack.<\/p>\n

Installing the Plugin<\/h3>\n

To install the Stencil Webpack Plugin in your project, use npm<\/code> (or yarn<\/code>) and save it as a development dependency. For example:<\/p>\n

npm install @stencil\/webpack --save-dev\n<\/code><\/pre>\n
Using the Plugin<\/h3>\n
Using the Stencil Webpack Plugin is a two-step process. You must import the collections you are using into your project code at some appropriate location depending on the architecture of your application, and you must update the webpack.config.js<\/code> file to call the plugin which will copy the required files to the output directory for your application.<\/p>\n
<\/p>\n
Importing the Collections<\/h4>\n
In order to use your component collections within an application, you generally have to import them in some manner. This will result in Webpack adding the appropriate Stencil loader scripting to the appropriate bundle.<\/p>\n
Angular<\/h5>\n
In an Angular application, you should add the component collection imports to the app.module.ts<\/code> file. You should also make sure you are using the CUSTOM_ELEMENTS_SCHEMA<\/code> as in the following example.<\/p>\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\n\nimport 'accounting-components';\nimport 'payroll-components';\nimport 'purchasing-components';\nimport 'web-components';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [\n    CUSTOM_ELEMENTS_SCHEMA\n  ]\n})\nexport class AppModule { }\n<\/code><\/pre>\n
Updating webpack.config.js<\/code><\/h4>\n
Once you have the proper Stencil loader scripts bundling with your project, you need to have the collections copied to a known location in the build output so the Stencil loader can load them as needed. This is where the Stencil Webpack Plugin is used.<\/p>\n
Important:<\/strong> If you are in an Angular CLI project, you must first eject the project in order to modify the webpack.config.js<\/code> file.<\/p>\n
After installing the plugin, modify your webpack.config.js<\/code> file as such:<\/p>\n
const stencil = require('@stencil\/webpack');\n\n...\n\n  "plugins": [\n    new stencil.StencilPlugin({\n      collections: [\n        'node-modules\/accounting-components\/dist\/accountingcomponents',\n        'node-modules\/payroll-components\/dist\/payrollcomponents',\n        'node-modules\/purchasing-components\/dist\/purchasingcomponents',\n        'node-modules\/web-components\/dist\/webcomponents'\n    ]}),\n\n<\/code><\/pre>\n
The plugin constructor takes a configuration object. At this time, the only property in this object is the collections<\/code> property. A configuration object is used rather than a simple list of files in order to support the easy addition of options in the future.<\/p>\n
The collections<\/code> property contains an array of component collections you would like to use. If you only have one collection, you can specify just a string instead of an array of strings.<\/p>\n
The component collections do not have to be installed in node-modules<\/code> if you do not want to publish them to an NPM registry (though publishing them to either the public registry or to a private registry is suggested). You could, for example, install them in a web-components<\/code> directory if so desired. Manually copying the component collections as such is beyond the scope of this document.<\/p>\n
Once you have this set up, a build (npm run build<\/code> for example) will copy the components to a build<\/code> directory under the output directory for the build following usual Stencil conventions.<\/p>\n
Next Steps<\/h3>\n
To date, this plugin has only been tested with an Angular application. In the future, I hope to demonstrate using this plugin to include web components built with Stencil in applications written using other frameworks such as Vue or React.<\/p>\n","protected":false},"excerpt":{"rendered":"
Many applications are built using Webpack. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application. Please note that the Webpack plugin is not required to use web components built with Stencil in other applications. This plugin just gives you an […]<\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[76,7,82],"class_list":["post-2047","post","type-post","status-publish","format-standard","hentry","category-all","tag-stencil","tag-tools","tag-web-components"],"acf":[],"yoast_head":"\nUsing Webpack with Web Components Built Using Stencil - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Webpack with Web Components Built Using Stencil\" \/>\n<meta property=\"og:description\" content=\"Many applications are built using Webpack. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application. Please note that the Webpack plugin is not required to use web components built with Stencil in other applications. This plugin just gives you an […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-09T17:34:02+00:00\" \/>\n<meta name=\"author\" content=\"Ken Sodemann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ken Sodemann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\"},\"author\":{\"name\":\"Ken Sodemann\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/00deec3725c91ec95772de89be49f5ca\"},\"headline\":\"Using Webpack with Web Components Built Using Stencil\",\"datePublished\":\"2017-11-09T17:34:02+00:00\",\"dateModified\":\"2017-11-09T17:34:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\"},\"wordCount\":503,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"stencil\",\"Tools\",\"web components\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\",\"url\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\",\"name\":\"Using Webpack with Web Components Built Using Stencil - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2017-11-09T17:34:02+00:00\",\"dateModified\":\"2017-11-09T17:34:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Webpack with Web Components Built Using Stencil\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/00deec3725c91ec95772de89be49f5ca\",\"name\":\"Ken Sodemann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a9bac28efdb8aadafd3c99d5a39a73a67712b5bd63aa6084c138ee7c157f31f1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a9bac28efdb8aadafd3c99d5a39a73a67712b5bd63aa6084c138ee7c157f31f1?s=96&d=mm&r=g\",\"caption\":\"Ken Sodemann\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/ken_sodemann\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using Webpack with Web Components Built Using Stencil - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil","og_locale":"en_US","og_type":"article","og_title":"Using Webpack with Web Components Built Using Stencil","og_description":"Many applications are built using Webpack. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application. Please note that the Webpack plugin is not required to use web components built with Stencil in other applications. This plugin just gives you an […]","og_url":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil","og_site_name":"Ionic Blog","article_published_time":"2017-11-09T17:34:02+00:00","author":"Ken Sodemann","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ken Sodemann","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil"},"author":{"name":"Ken Sodemann","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/00deec3725c91ec95772de89be49f5ca"},"headline":"Using Webpack with Web Components Built Using Stencil","datePublished":"2017-11-09T17:34:02+00:00","dateModified":"2017-11-09T17:34:02+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil"},"wordCount":503,"commentCount":9,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["stencil","Tools","web components"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil","url":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil","name":"Using Webpack with Web Components Built Using Stencil - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2017-11-09T17:34:02+00:00","dateModified":"2017-11-09T17:34:02+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/using-webpack-with-web-components-built-using-stencil#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Using Webpack with Web Components Built Using Stencil"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/00deec3725c91ec95772de89be49f5ca","name":"Ken Sodemann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a9bac28efdb8aadafd3c99d5a39a73a67712b5bd63aa6084c138ee7c157f31f1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a9bac28efdb8aadafd3c99d5a39a73a67712b5bd63aa6084c138ee7c157f31f1?s=96&d=mm&r=g","caption":"Ken Sodemann"},"url":"https:\/\/ionic.io\/blog\/author\/ken_sodemann"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2047"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2047\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}