Localhost static website development environment for plain html, css and javascript files with live reload.
Uses webpack + webpack-dev-server.
The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.
- Windows 64-bit OS
- NodeJS
- node version 12.16.3
- npm version 6.14.4
- 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
-
Clone this repository.
https://github.com/weaponsforge/livereload-webpack.git -
Install dependencies.
npm install
-
Run the localhost static website development environment.
npm run dev -
Edit the existing static files from the ./public directory and wait for live reload. Your updates will reflect on the web browser.
-
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 -> rulespart.
- Re-start the dev server.
npm run dev
-
Build the project for production environment. Built static files are placed in the /dist directory.
npm run build -
Run the production static website (does not use live reload).
npm run start
[1] - live reload using gulp + browser-sync (demo)
[2] - webpack notes (trello)
@weaponsforge
20200702