feat(wc:*): Generate webpack bundle file when creating new components (…

…#844)

* feat(wc:*): Generate webpack bundle file when creating new components

* fix

* fix

* feat(wc:global-search): Add bundle script

libs/web-components/global-search/README.md

@@ -69,7 +69,8 @@ import '@finastra/global-search';
 A demo code can be find here: [demo](https://github.com/Finastra/finastra-design-system/blob/master/libs/web-components/global-search/demo/index.html)
 
 ```html
-<script type="module" src="https://unpkg.com/@finastra/global-search@latest/dist/src/global-search.js?module"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<script src="https://cdn.jsdelivr.net/npm/@finastra/global-search/dist/fds-global-search.js"></script>
 
  <fds-global-search-group 
         slot="searches"

libs/web-components/global-search/package.json

@@ -12,6 +12,7 @@
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "scripts": {
+    "build": "webpack",
     "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/global-search.scss src/global-search-group/global-search-group.scss src/global-search-page/global-search-page.scss src/global-search-summary/global-search-summary.scss"
   },
   "dependencies": {

libs/web-components/global-search/webpack.config.cjs

@@ -0,0 +1,10 @@
+const path = require('path');
+const config = require('../base-webpack.config.cjs');
+
+config.entry = path.resolve(__dirname, './src/global-search.ts'),
+config.output = {
+    filename: 'fds-global-search.js',
+    path: path.resolve(__dirname, 'dist'),
+},
+
+module.exports = config;

libs/web-components/icon-bar/package.json

@@ -12,6 +12,7 @@
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "scripts": {
+    "build": "webpack",
     "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/icon-bar.scss src/icon-bar-item.scss"
   },
   "dependencies": {

libs/web-components/icon-bar/webpack.config.cjs

@@ -0,0 +1,10 @@
+const path = require('path');
+const config = require('../base-webpack.config.cjs');
+
+config.entry = path.resolve(__dirname, './src/index.ts'),
+config.output = {
+    filename: 'fds-icon-bar.js',
+    path: path.resolve(__dirname, 'dist'),
+},
+
+module.exports = config;

tools/generators/web-component/files/package.json

@@ -12,6 +12,7 @@
   "main": "dist/src/<%= fileName %>.js",
   "module": "dist/src/<%= fileName %>.js",
   "scripts": {
+    "build": "webpack",
     "build:style": "node ../../../scripts/sass-to-lit-css/index.js src/styles.scss"
   },
   "dependencies": {

tools/generators/web-component/files/webpack.config.cjs

@@ -0,0 +1,10 @@
+const path = require('path');
+const config = require('../base-webpack.config.cjs');
+
+config.entry = path.resolve(__dirname, './src/<%= fileName %>.ts'),
+config.output = {
+    filename: 'fds-<%= fileName %>.js',
+    path: path.resolve(__dirname, 'dist'),
+},
+
+module.exports = config;