0.1.2 • Published 2 years ago
file-watch-hmr v0.1.2
file-watch-hmr
File Watch HMR webpack plugin allows watching for file changes during development on the client or server
Requirements
- Node.js v10 or above
- Webpack 4.x - 5.x
Installation
$ npm install --save-dev file-watch-hmr
Usage
Add Webpack plugin
Add the plugin to your Webpack config (or Next.js).
// webpack.config.js
const { FileWatchHMRPlugin } = require('file-watch-hmr/plugin');
module.exports = {
...
// Add the plugin to your Webpack configuration
plugins: [
new FileWatchHMRPlugin({
// specific files can be watched
files: [
path.resolve(__dirname, 'app/locales/en/common.json'),
// glob patterns are also supported
path.resolve(__dirname, 'app/locales/**')
],
// or whole directories (with all subfolders and files)
folders: [
path.resolve(__dirname, 'app/locales/en'),
// even more complex folders with glob patterns
path.resolve(__dirname, 'app/*/en'),
]
})
]
};
Callback on the client side
The lib then can trigger a callback on the client whenever a watched changes by using Webpack HMR:
// Somewhere on your client
if (process.env.NODE_ENV === 'development') {
const { applyClientHMR } = require('file-watch-hmr/client');
applyClientHMR((changedFile) => {
// changedFile is the abolute path of the file that changed
});
}
Callback on the server side
The lib then can trigger a callback on the server whenever a watched file changes:
// Somewhere on the server
if (process.env.NODE_ENV === 'development') {
const { applyServerHMR } = require('file-watch-hmr/server');
applyServerHMR((changedFile) => {
// changedFile is the abolute path of the file that changed
});
}
⚠️ If your server side is bundled using Webpack, the lib will use the native HMR (if enabled). For it to work properly the lib must be bundled, therefore, you should specify the lib as not external.
There are 2 ways to do that:
- if you are using webpack-node-externals specify
file-watch-hmr
in thewhitelist
. - use a relative path to
node_modules
, something like:
const { applyServerHMR } = require('../node_modules/file-watch-hmr/server');
Example
A working example with Next.js can be found in the examples
folder.
Attribution
This plugin is heavily inspired and code reused from "i18next-hmr" from felixmosh. So all kudos to him.