2 npm packages were built with webpack to bundle.js

Watch site in action

templates/BuiltWithWebpackYarnInstalledPackage

BUILDING WITH WEBPACK

. in the terminal, log into dockerized node service terminal

docker compose exec ts bash

. navigating to this package folder in the ts docker service

cd www/templates/BuiltWithWebpackYarnInstalledPackage/

. viewing folder files

ls -la

. initializing package with new package.json file for npm registry. Yarn prompts few questions: new package name, author. You may copy now this package.json from this template.

yarn init

. the final package.json in this npm package.

{
  "name": "@jaisocx/example-built-with-webpack",
  "version": "1.0.0",
  "author": "Jaisocx",
  "private": false,
  "type": "module",
  "main": "./build/CommonJS/index.js",
  "types": "./build/ESNext/index.d.ts",
  "module": "./build/ESNext/index.js",
  "files": [
    "build/CommonJS",
    "build/ESNext",
    "build/Simple",
    "build/webpack",
    "assets/",
    "README.md"
  ],
  "scripts": {
    "webpack": "webpack"
  },
  "dependencies": {
    "@jaisocx/css-clean-start": "^1.3.21",
    "@jaisocx/tooltip": "^1.2.4"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "path-browserify": "^1.0.1",
    "postcss-loader": "^8.1.1",
    "postcss-url": "^10.1.3",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.7.x",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }
}

. installing sites tools from npm registry

yarn add @jaisocx/css-clean-start
yarn add @jaisocx/tooltip

. viewing node_modules folder, there will be @jaisocx lib installed

ls -la node_modules

. viewing node_modules/@jaisocx folder, there will be 2 packs installed, css-clean-start and tooltip

ls -la node_modules/@jaisocx

 total 0
 drwxr-xr-x    6 root     root           192 Mar 31 02:20 .
 drwxr-xr-x  155 root     root          4960 Mar 31 02:20 ..
 drwxr-xr-x   13 root     root           416 Mar 31 02:20 css-clean-start     styling lib for responsive sites.
 drwxr-xr-x    5 root     root           160 Mar 31 02:20 event-emitter       helping js classes for the Tooltip
 drwxr-xr-x    5 root     root           160 Mar 31 02:20 template-renderer   helping js classes for the Tooltip
 drwxr-xr-x    7 root     root           224 Mar 31 02:20 tooltip             a js class to show and hide any tools, just add html to tooltip.setHtml( anyTextOrHtml )

package.json development dependencies for the webpack

  "devDependencies": {
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "path-browserify": "^1.0.1",
    "postcss-loader": "^8.1.1",
    "postcss-url": "^10.1.3",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.7.x",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }

. after have added development npm dependencies to package.json, installing with yarn these dependencies. these npm packages are for the webpack.

yarn install

. viewing node_modules folder, there will be a lot of libs installed

ls -la node_modules

. after have built this package with Workspace Project Builder ./buildPackages.sh producing with the Webpack the bundle.js

yarn exec webpack

. viewing build/webpack folder, there will be the bundle.js

ls -la build/webpack

 total 84
 drwxr-xr-x    4 root     root           128 Mar 31 02:22 .
 drwxr-xr-x    6 root     root           192 Mar 31 02:22 ..
 drwxr-xr-x    3 root     root            96 Mar 31 02:22 assets                                the folder with fonts
 -rw-r--r--    1 root     root         84602 Mar 31 02:22 example-built-with-webpack-bundle.js  the bundle.js