Comments (6)
I'm having the same question, because I work with "Laravel" and would like it to update browsers when I needed the .php files as well.
from webpack-livereload-plugin.
This works for me:
https://github.com/pigcan/extra-watch-webpack-plugin
Add the plugin before webpack-livereload-plugin
though.
from webpack-livereload-plugin.
Thanks for the suggestion @henrypenny. Seems like a useful solution.
from webpack-livereload-plugin.
@henrypenny: I tried the extra-watch-webpack-plugin as you suggested, placing it before webpack-livereload-plugin
, in my Laravel Mix's webpack config settings, but changing the targeted PHP files still doesn't trigger a page reload. I still have to manually reload the browser to see those changes. Any ideas?
LiveReload works perfectly for CSS and JS, just not for PHP files.
Here's my webpack.mix.js
file:
const mix = require('laravel-mix');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
require('@tinypixelco/laravel-mix-wp-blocks');
// Initialize Mix.
mix
.setPublicPath('./public')
.webpackConfig({
plugins: [
new ExtraWatchWebpackPlugin({
files: 'resources/views/**/*.php',
}),
new LiveReloadPlugin({
useSourceHash : true,
appendScriptTag : true,
port : 4000,
}),
],
});
// Handle CSS.
mix
.postCss('resources/styles/app.css', 'styles')
.postCss('resources/styles/editor.css', 'styles')
.options({
processCssUrls: false,
postCss: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
],
});
// Handle JS.
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
// Copy assets.
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
// Other settings.
mix
.sourceMaps()
.version();
from webpack-livereload-plugin.
It started sort of working as soon as I tried removing useSourceHash: true
, and added delay: 100
to the LiveReloadPlugin
settings. I don't actually have a clue what's going on under the hood. It also turns out, using extra-watch-webpack-plugin
isn't helping one way or the other, so maybe Laravel Mix is already set up to watch those PHP files. But, it's still only working sporadically.
I had earlier enabled useSourceHash
to prevent the whole page from reloading when I only changed the CSS (which I found annoying), but doing that also disabled page reload on PHP file changes, for some unknown reason.
If I don't include delay: 100
(or delay: 500
or some positive integer), then it reloads more sporadically when the files change. Using a number like 100 ms at least improves it, but it's still super inconsistent.
I dunno, I'll live with this for now, but it's still pretty frustrating. Here's my revised, semi-working webpackConfig
section for anyone interested:
mix
.setPublicPath('./public')
.webpackConfig({
plugins: [
new LiveReloadPlugin({
appendScriptTag : true,
port : 4000,
delay : 100,
}),
],
});
from webpack-livereload-plugin.
This worked for me, I had to dig through the levels of abstraction the webpack-livereload-plugin
adds to livereload-js
. The option that need to be added to watch php
files is, ext: "js,css,php"
.
mix
.webpackConfig({
plugins: [new LiveReloadPlugin({
ignore: /(node_modules)|(vendor)/,
// https://github.com/livereload/livereload-js/blob/master/src/options.js
ext: "js,css,php"
})],
from webpack-livereload-plugin.
Related Issues (20)
- v1.1.0 doesn't seem to have the `delay` option HOT 1
- Multiple instances of livereload HOT 1
- Compatibility with CleanWebpackPlugin?
- High CPU HOT 6
- too many reloads, is my delay ignored? HOT 17
- Running app behind proxy returns "tinylr": "welcome" message, not expected dist/index,html file HOT 5
- Support reverse proxied URLs with "public_host" and "public_port" plugin configuration. HOT 2
- Configure polling on client in place of wss:// calls? HOT 4
- Cross-site cookie chrome warning HOT 2
- how do I have to configure webpack.config.js HOT 2
- Webpack 5 support? HOT 15
- TS2322: Type 'LiveReloadPlugin' is not assignable to type WebpackPluginInstance'.
- Multiple bundles on same page breaks reload
- TypeError: compiler.plugin is not a function (Webpack 5 plugin API change) HOT 1
- Upgrade tiny-lr to 2.0.0 which includes latest livereload-js HOT 1
- Add option to watch for changes on other files in the project HOT 2
- livereload snippet not being injected in certain cases
- reloads after focusing on browser
- Compability with WatchExternalFilesPlugin?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-livereload-plugin.