chore: optimise webpack config for examples

[webdiscus]

Hello @ankurk91 ,

I'm the author of the webpack-remove-empty-scripts that is used in your project.

I want to demonstrate my other html-bundler-webpack-plugin that simplify the Webpack configuration
to generate HTML with assets from source files (templates, scripts, styles, images, fonts, etc.).

The html-bundler-webpack-plugin is the best modern alternative to html-webpack-plugin.

Using the Bundler Plugin, an entry point is an HTML template.
All your source asset files (scripts, styles, images, etc.) can be specified directly in the HTML template using <script> and <link> tags.
The plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML.
The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory.

Using the bundler plugin:

• An entry point is an HTML template.
• Binding the source script/style filenames directly in HTML using <script> and <link>.
• Resolving source asset files specified in attributes href src srcset etc.
• Inline JS, CSS, SVG, PNG without additional plugins and loaders.
• Support for any templating engine (Eta, EJS, Handlebars, Nunjucks, LiquidJS, etc.).

Your profit

• source filenames of scripts and styles can be specified in one right place, in HTML, no need to define them in Webpack entry or import SCSS/CSS in JS file
• just one plugin replaces the functionality of many plugins and loaders such as:
  • html-webpack-plugin
  • mini-css-extract-plugin
  • html-loader
  • style-loader
  • svg-url-loader
  • TerserPlugin.extractComments
  • and many others

[webdiscus]

specify source SCSS files directly in HTML

[webdiscus]

create the separate SCSS file to bundle many other CSS/SCSS files

[webdiscus]

the Bundler Plugin already has the extractComments option, defaults is false to avoid extraction of files like *.LICENSE.txt

[webdiscus]

fix the JS file extension to generate minimised JS files in docs/ directory

[ankurk91]

Hey,
Thanks for the pull request.
I will review it soon

[webdiscus]

Hey, Thanks for the pull request. I will review it soon

You can try the forked branch:

git clone https://github.com/webdiscus/demo-vue-toast-notification.git
cd demo-vue-toast-notification
npm i
npm start

Generate static production files:

npm run docs

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.13%. Comparing base (4116b16) to head (593df38).
Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #98   +/-   ##
=======================================
  Coverage   67.13%   67.13%           
=======================================
  Files           6        6           
  Lines         143      143           
  Branches       40       41    +1     
=======================================
  Hits           96       96           
  Misses         47       47           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.