Comments (13)
This should be possible within a plugin. Something similar to this:
plugins: [
function(compiler) {
compiler.plugin("after-compiler", function() {
this.fileDependencies.push("/path/to/my/file");
this.contextDependencies.push("/path/to/my/folder");
}
}
]
from webpack-dev-server.
I gave this a try and added this to the top of my gruntfile:
function WatchExternalFilesPlugin() {}
WatchExternalFilesPlugin.prototype.apply = function(compiler) {
compiler.plugin("after-compile", function(compilation, callback) {
compilation.fileDependencies.push("./app/worksheet.html");
callback();
});
};
When I change worksheet.html I see in the javascript console:
App updated. Recompiling...
[WDS] App hot update... client?f5c9:52
[HMR] Checking for updates on the server... dev-server.js?05e4:41
GET http://localhost:8991/aa9359377b69ed42a399.hot-update.json 404 (Not Found) bootstrap aa9359377b69ed42a399?000c:23
[HMR] No Update found.
If I comment out the HotModuleReplacementPlugin it will refresh the page otherwise it does nothing.
from webpack-dev-server.
Hi, try this : https://github.com/Fridus/webpack-watch-files-plugin ;)
from webpack-dev-server.
Just wrote a plugin that does exactly the same - solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .
@Fridus looks like this 1 got move power under its sleeve.
from webpack-dev-server.
Bit of a janky solution, but I used the text-loader module to do something like this. (In my case, CSS generated outside of webpack, but same principal.)
Basically, just npm install text-loader
and then make a watch.js
entry point (which you'll not actually use). In your watch.js
file, add in text files like:
require('text!./app/worksheet.html');
That way, watch.js
will get changed any time you change worksheet.html
, and your app will get reloaded.
A better variant of this would be to have a "hash-loader" which would just MD5 hash the content and use that instead of the actual content, because in this case you don't actually need the content, just something to notify that there's a change. Should be pretty easy to create such a loader.
from webpack-dev-server.
+1 for this feature
from webpack-dev-server.
Is this possible or not?
from webpack-dev-server.
+1
from webpack-dev-server.
👏
from webpack-dev-server.
Closing issue because the answer provided is clear; make a loader for this, or use an existing one :).
from webpack-dev-server.
Did anyone ever come up with a solution for this? It doesn't seem like fileDependencies
or contextDependencies
exist anywhere.
from webpack-dev-server.
@sokra shouldn't this be compiler.plugin('after-compile'...
? I can't find any hooks anywhere called after-compiler
.
from webpack-dev-server.
possible problem for Linux users see https://webpack.js.org/configuration/watch/#not-enough-watchers
from webpack-dev-server.
Related Issues (20)
- Overlay.runtimeErrors doesn't work HOT 1
- Deep unmet peerDependency warnings from `memfs` HOT 4
- 5.0 dev server requires 'unsafe-eval' script-src in CSP HOT 3
- Types in lib/Server referring to non-existing Request_1 and Response_1 interfaces HOT 1
- Webpack dev server HRM not update vuejs file after compile error HOT 3
- After the latest webpack-dev-server upgrade, not able to start the server HOT 3
- devServer.static can't be an array. HOT 2
- devServer proxy config outputs deprecation warning in http-proxy-middleware
- Error while running example general/config-array HOT 1
- Invalid options object: options has an unknown property 'running' (webpack-cli v4.10.0) HOT 7
- Consider editing repository setings to remove "Packages" section HOT 1
- Configuring dist/main.js to be included when dev server starts HOT 3
- Types of version 5.0.0 still allow `proxy` to be an object
- The server log is being spammed HOT 2
- K
- The memory usage during project runtime after upgrade is very high HOT 2
- Additional Assets emitted via `processAssets` hook do not invalidate the build HOT 4
- Web Dev Server Inaccessible from Local Network Devices Despite Correct Configuration HOT 2
- Add visual progress indicator HOT 3
- Where to read more about app field in config
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-dev-server.