statianzo / Webpack Livereload Plugin
Licence: isc
LiveReload during webpack --watch
Stars: ✭ 183
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Webpack Livereload Plugin
Html5 Boilerplate
A simple, fast, modern, pure html, css (and sass), js, live reload starter template
Stars: ✭ 65 (-64.48%)
Mutual labels: webpack, livereload
Browser Sync Webpack Plugin
Easily use BrowserSync in your Webpack project.
Stars: ✭ 356 (+94.54%)
Mutual labels: webpack, livereload
Simple Boilerplate
A simple webpack boilerplate for your comfortable work with HTML, JS and CSS.
Stars: ✭ 116 (-36.61%)
Mutual labels: webpack, livereload
Slater Theme
Shopify Starter theme based on slate
Stars: ✭ 47 (-74.32%)
Mutual labels: webpack, livereload
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-18.03%)
Mutual labels: webpack, livereload
Webpack Deadcode Plugin
Webpack plugin to detect unused files and unused exports in used files
Stars: ✭ 180 (-1.64%)
Mutual labels: webpack
Scalable React Typescript Boilerplate
⭐️ Scalable micro-framework featuring React and TypeScript
Stars: ✭ 174 (-4.92%)
Mutual labels: webpack
Webpack Cli
webpack CLI provides the interface of options webpack uses in its configuration file. The CLI options override options passed in the configuration file.
Stars: ✭ 2,270 (+1140.44%)
Mutual labels: webpack
Advanced React Webpack Babel Setup
The advanced React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 176 (-3.83%)
Mutual labels: webpack
Fed Note
我是Mokou， 📘 这里是写前端博客和备忘学习的地方。Vue3 源码解析连载中。喜欢请Star。
Stars: ✭ 180 (-1.64%)
Mutual labels: webpack
Essential React
A minimal skeleton for building testable React apps using Babel
Stars: ✭ 2,035 (+1012.02%)
Mutual labels: webpack
Ts App
Boilerplate project for a TypeScript API (Express, tsoa) + UI (React/TSX)
Stars: ✭ 182 (-0.55%)
Mutual labels: webpack
Webpack Serve
Takes your webpack config and creates a development server with hot module reloading and error overlay
Stars: ✭ 177 (-3.28%)
Mutual labels: webpack
Vue Admin Template
Sample Admin Template based on Vuejs & Vuetify.
Stars: ✭ 177 (-3.28%)
Mutual labels: webpack
webpack-livereload-plugin
LiveReload when running webpack --watch
Installation
Install the package
npm install --save-dev webpack-livereload-plugin
Add the plugin to your webpack config
// webpack.config.js
var LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
plugins: [
new LiveReloadPlugin(options)
]
}
Add a script tag to your page pointed at the livereload server
<script src="http://localhost:35729/livereload.js"></script>
Options
-
protocol- (Default: protocol of the page, eitherhttporhttps) Protocol for livereload<script>src attribute value -
port- (Default: 35729) The desired port for the livereload server. If you define port 0, an available port will be searched for, starting from 35729. -
hostname- (Default: hostname of the page, likelocalhostor10.0.2.2) The desired hostname for the appended<script>(if present) to point to -
appendScriptTag- (Default: false) Append livereload<script>automatically to<head>. -
ignore- (Default:null) RegExp of files to ignore. Null value means ignore nothing. It is also possible to define an array and use multiple anymatch patterns. -
delay- (Default:0) amount of milliseconds by which to delay the live reload (in case build takes longer) -
useSourceHash- (Default:false) create hash for each file source and only notify livereload if hash has changed
Why?
Yes, there's already webpack-dev-server that handles live reloading
and more complex scenarios. This project aims to solve the case where
you want assets served by your app server, but still want reloads
triggered from webpack's build pipeline.
HTTPS
If you set key, cert, or pfx options, they'll get passed through to
tiny-lr as options and it will
serve over HTTPS. You'll also also set protocol to https.
FAQ
Webpack always generates js and css together
If your webpack is always generating js and css files together you could set
useSourceHash to true to generate a hash for each changed asset and it
should prevent multiple reloads.
Alternatively if this slows your build process you could set liveCSS
and liveImg to false to prevent multiple reloads.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].