#140: Introduce NPM workspaces & Webpack

[nizniz187]

Environment Requirements

Make sure your node.js runtime version is:

• >= 12: for ES6 module support
• < 17: for avoiding known issue

Major Adjustments

1. Introduce NPM workspaces

   • The w-components package is moved under packages folder.
   • The other codes related to official site are remained in the root.
2. Introduce Webpack
   • To use modules installed in .node_modules, we need to use Webpack to bundle them to one single JS file.
   • To import the bundled JS file, we need to output the bundle in the format of ES6 module. This topic was discuss in #59 before and gave up then for their internal support issue. The feature is still in experiment, but looks good enough for our use now.

Usage

1. Local setup In the root directory: a. Install packages

       npm install

   b. Build bundle

       npm run build

   c. Visit index.html with live server

2. Publish to GitHub page Simply build bundle as above and push to git, everything should be done.

Known Issues to be Solved

1. As using NPM for package management, I changed highlight.js dependency from local to npm module. However I tried different Webpack configs, this package would always be included and caused the bundle oversized (almost 1MB.)
   • Should keep trying, or just fallback to local files otherwise.
2. With Webpack bundling system, now we lose the hot-reload feature.
   • Introduce webpack-dev-server plugin maybe, so that the codes could be auto re-build on source file changes.

[cwpeng]

Done.