weaponsforge / livereload-webpack

Localhost static website development environment for plain HTML, CSS, and JavaScript files with live reload using Webpack 5

livereload-webpack

Localhost static website development environment for plain html, css and javascript files with live reload.
Uses webpack + webpack-dev-server.

Content

• Dependencies
• Installation
• Usage
• References

Dependencies

The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.

1. Windows 64-bit OS
2. NodeJS
   • node version 12.16.3
   • npm version 6.14.4
3. NodeJS webpack modules (installed via npm)
   • webpack 5.64.2
   • webpack-dev-server 4.5.0
   • webpack-cli 4.9.1
   • css-loader 6.5.1
   • style-loader 3.3.1

Installation

1. Clone this repository.
   https://github.com/weaponsforge/livereload-webpack.git

2. Install dependencies.
   npm install

Usage

1. Run the localhost static website development environment.
   npm run dev

2. Edit the existing static files from the ./public directory and wait for live reload. Your updates will reflect on the web browser.

3. To include new static website files on live reload:

   • Stop the localhost dev server.
   • Create new static (.js, .css) files inside the ./src directory.
     • Import the new .js and .css files in ./src/index.js
     • Javascript events may need to be attached to Html DOM elements using .addEventListener() if you are only using raw Html files.
     • New Html files need to be encoded inside new HtmlWebpackPlugin({ ... }) in webpack.config.js
     • Specific specific file types other than CSS and image files may need to have their node module dependency installed and included in webpack.config.js's module -> rules part.
   • Re-start the dev server.
     npm run dev

4. Build the project for production environment. Built static files are placed in the /dist directory.
   npm run build

5. Run the production static website (does not use live reload).
   npm run start

References

[1] - live reload using gulp + browser-sync (demo)
[2] - webpack notes (trello)

@weaponsforge
20200702