Building Smart Modules

This help tutorial will teach you how to build all Smart /modules with Webpack. It is extending the webpack configuration from Using with Webpack.

.

Using Smart Elements with Webpack

project

	  webpack-demo
	  |- package.json
	+ |- webpack.config.js
	  |- /dist
		|- 
	  |- /src
		|- smart.button.js
		|- smart.element.js
		|- ......		
		|- /mobules
		   |- /smart.element.js
		   |- /smart.button.js
		   |- /.......
	

As you can see from the project structure, we placed all smart javasript files within the /src/ folder.

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

function getEntries (){
	return fs.readdirSync('./src/modules/')
		.filter(
			(file) => file.match(/.*\.js$/)
		)
		.map((file) => {
			return {
				name: file.substring(0, file.length - 3),
				path: './src/modules/' + file
			}
		}).reduce((memo, file) => {
			memo[file.name] = file.path
			return memo;
		}, {})
}

module.exports = {
  mode: 'production',
  entry: getEntries,
  output: {
	filename: '[name].js',
	path: path.resolve(__dirname, 'dist')
  },
   plugins: [
	new webpack.BannerPlugin({
	  banner: '\n/* Smart HTML Elements v5.0.0 (2019-November) \nCopyright (c) 2011-2019 jQWidgets. \nLicense: https://htmlelements.com/license/ */\n\n',
	}),
  ],
  module: {
	rules: [
		{
			test: /\.js$/,
			exclude: /(node_modules|bower_components)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['@babel/preset-env']
				}
			}
		}
	] 
  }
};
	

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
	"build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
	"webpack": "^4.20.2",
	"webpack-cli": "^3.1.2"
  },
  "dependencies": {
	"@babel/preset-env": "^7.7.1",
	"babel-loader": "^8.0.6",
	"es6-loader": "^0.2.0",
	"es6-promise": "^4.2.8",
	"http-server": "^0.11.1",
	"lodash": "^4.17.5"
  }
}
	

Install and Run Webpack

1. Run the npm install command to install the required node modules. (When installing a package that will be bundled into your production bundle, you should use npm install --save. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should use npm install --save-dev.)
2. Now the npm run build command can be used.

output

The output is within the /dist/ folder. All web component modules are now packed and ready for usage in your applications.

You can now refer them in your applications like that:

<script type="module" src="../../source/modules/smart.grid.js"></script>