├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── index.js ├── package.json ├── test ├── fixtures │ ├── components │ │ ├── local-hello-world.rt │ │ ├── remote-hello-world.ajs │ │ └── remote-hello-world.jsx │ ├── index.html │ └── index.jsx ├── test.js └── webpack.config.js └── with-great-power-comes-great-responsibility-spider-man-super-powers-abilities-voltaire-quote.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | 30 | .DS_Store 31 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '6.11.0' -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 En 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/sap9433/filewatcher-webpack-plugin.svg?branch=master)](https://travis-ci.org/sap9433/filewatcher-webpack-plugin) 2 | # watchFile-webpack-plugin ([AustinJs](https://www.npmjs.com/package/filewatcher-webpack-plugin)) 3 | [![forthebadge](http://forthebadge.com/images/badges/built-with-swag.svg)](http://forthebadge.com) [![forthebadge](http://forthebadge.com/images/badges/for-you.svg)](http://forthebadge.com) 4 | 5 | 6 | 7 | > A webpack plugin to Watch files / folders not under webpack watch. Accepts glob pattern. Turbo powered by [chokidar](https://github.com/paulmillr/chokidar) 8 | 9 | 10 | #### [Usage](https://www.npmjs.com/package/filewatcher-webpack-plugin) :snowflake: :sunny: 11 | 12 | Most simplistic use of this plugin would be using the following in your webpack.config.js file - 13 | 14 | ``` 15 | const filewatcherPlugin = require("filewatcher-webpack-plugin"); 16 | ... 17 | plugins: [ 18 | new filewatcherPlugin({watchFileRegex: ['../scriptFolder/**/*.js', '../stylesheets/**/*.css']}) 19 | ], 20 | ... 21 | ``` 22 | 23 | `watchFileRegex` takes a string or an array of strings . String can represent a single file path , or a glob(regex). Here we are watching "all files contained in folder named `scriptFolder` and `stylesheets` (or any nested folder inside it) having extension .js or .css respectively". 24 | 25 | --------------------- 26 | 27 | 28 | #### Why do we even need such a plugin ? :no_mouth: :star: 29 | 30 | Thanks for your focus . It's a good question . Firstly there already exists [a few](https://www.npmjs.com/package/file-watcher-webpack-plugin) plugins [for this](https://github.com/Fridus/webpack-watch-files-plugin) . Which suggests there is surely a need for this functionality . Let me explain when - 31 | 32 | If you are bootstrapping a conventional webpack project , probably you won't need this . But if you are integrating webpack in an existing complex project , there might arise a situation when you have to watch for files , outside the purview of webpack, and restart compilation. 33 | 34 | We faced a similar issue while integrating , service worker in our large complex code base. Only a part of the codebase is in react and built using webpack , Rest of the code base is powered by jQuery / Bootstarp . When we added [workbox](https://developers.google.com/web/tools/workbox/) , we had to regenerate the `sw.js` file by restarting webpack compilation even when some Jquery/Css file, beyond the purview of webpack, will change . And this plugin was commissioned. 35 | 36 | All of the existing plugin had limitations , i.e. they either doesn't listen to changes in entire directory tree / they don't allow us to override file change event handler callBacks. 37 | 38 | --------------------- 39 | 40 | #### I'm feeling super geeky and tell me more about how can I play with this plugin , a.k.a Supported options :bulb: :electric_plug: 41 | 42 | > All the following options are basically chokidar API options . So please refer [this](https://github.com/paulmillr/chokidar#api) for the original source . 43 | 44 | ###### API Options, related to files / path to watch ignore etc. :shower: :hammer: 45 | 46 | Supported Options | Details 47 | ------------ | ------------- 48 | watchFileRegex | (string or array of strings). Paths to files, dirs to be watched recursively, or glob patterns. 49 | persistent (default: true) | Indicates whether the process should continue to run as long as files are being watched. If set to false when using fsevents to watch, no more events will be emitted after ready, even if the process continues to run. 50 | ignored (anymatch-compatible definition) | Defines files/paths to be ignored. The whole relative or absolute path is tested, not just filename. If a function with two arguments is provided, it gets called twice per path - once with a single argument (the path), second time with two arguments (the path and the fs.Stats object of that path). 51 | ignoreInitial (default: false) | If set to false then add/addDir events are also emitted for matching paths while instantiating the watching as chokidar discovers these file paths (before the ready event). 52 | followSymlinks (default: true) | When false, only the symlinks themselves will be watched for changes instead of following the link references and bubbling events through the link's path. 53 | cwd (no default) | The base directory from which watch paths are to be derived. Paths emitted with events will be relative to this. 54 | disableGlobbing (default: false) | If set to true then the strings passed to .watch() and .add() are treated as literal path names, even if they look like globs. 55 | 56 | ---- 57 | 58 | ###### API Options, related to Performance. :money_with_wings: :flashlight: 59 | 60 | Supported Options | Details 61 | ------------ | ------------- 62 | usePolling (default: false) | Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations. Setting to true explicitly on OS X overrides the useFsEvents default. You may also set the CHOKIDAR_USEPOLLING env variable to true (1) or false (0) in order to override this option.When usePolling: true , interval default is 100. 63 | useFsEvents (default: true on OSX)| Whether to use the fsevents watching interface if available. When set to true explicitly and fsevents is available this supercedes the usePolling setting. When set to false on OS X, usePolling: true becomes the default. 64 | alwaysStat (default: false) | If relying upon the fs.Stats object that may get passed with add, addDir, and change events, set this to true to ensure it is provided even in cases where it wasn't already available from the underlying watch events. 65 | depth (default: 99) | If set, limits how many levels of subdirectories will be traversed. 66 | awaitWriteFinish (default: false) | By default, the add event will fire when a file first appears on disk, before the entire file has been written. Furthermore, in some cases some change events will be emitted while the file is being written. In some cases, especially when watching for large files there will be a need to wait for the write operation to finish before responding to a file creation or modification. Setting awaitWriteFinish to true (or a truthy value) will poll file size, holding its add and change events until the size does not change for a configurable amount of time. The appropriate duration setting is heavily dependent on the OS and hardware. For accurate detection this parameter should be relatively high, making file watching much less responsive. Use with caution.options.awaitWriteFinish can be set to an object in order to adjust following timing params. 67 | awaitWriteFinish.stabilityThreshold (default: 2000) | Amount of time in milliseconds for a file size to remain constant before emitting its event. 68 | awaitWriteFinish.pollInterval (default: 100) | File size polling interval. 69 | 70 | ----- 71 | 72 | ###### API Options, related to Errors. :mega: :key: 73 | Supported Options | Details 74 | ------------ | ------------- 75 | ignorePermissionErrors (default: false) | Indicates whether to watch files that don't have read permissions if possible. If watching fails due to EPERM or EACCES with this set to true, the errors will be suppressed silently. 76 | atomic (default: true if useFsEvents and usePolling are false) | Automatically filters out artifacts that occur when using editors that use "atomic writes" instead of writing directly to the source file. If a file is re-added within 100 ms of being deleted, Chokidar emits a change event rather than unlink then add. If the default of 100 ms does not work well for you, you can override it by setting atomic to a custom value, in milliseconds. 77 | 78 | 79 | ###### API Options, related to Callbacks. :basketball: :golf: 80 | 81 | > With great power comes great responsibility. If you are trying to override compilation stages , please [read this](https://github.com/webpack/docs/wiki/how-to-write-a-plugin) to avoid breaking stuff. 82 | 83 | 84 | Supported Options | Details 85 | ------------ | ------------- 86 | onAddCallback | Must be a function . Callback to be executed when a new file added which matches the path mentioned in `watchFileRegex` . defaults to ``` function(path) { return null;} ``` 87 | onChangeCallback | Must be a function . Callback to be executed when any file, under file-watcher's purview, is changed . defaults to ``` function(path) {console.log(`\n\n Compilation Started after change of - ${path} \n\n`);compiler.run(function(err) {if (err) throw err;watcher.close();});console.log(`\n\n Compilation ended for change of - ${path} \n\n`);} ``` . [Compiler](https://github.com/webpack/docs/wiki/plugins) is webpack object. 88 | onUnlinkCallback | Must be a function . Callback to be executed when a file is unlinked . defaults to ``` function(path) { console.log(`File ${path} has been removed`);} ``` 89 | onAddDirCallback | Must be a function . Callback to be executed when a new folder added . defaults to ``` function(path) { console.log(`Directory ${path} has been added`);} ``` 90 | onReadyCallback | Must be a function . Callback to be executed when all the files are added to the watcher and watcher is ready to monitor change . defaults to ``` function() { console.log('Initial scan complete. Ready for changes');} ``` 91 | onRawCallback | Must be a function . Callback to be executed when a raw event is encountered . defaults to ``` function(event, path, details) { return null;} ``` 92 | onErrorCallback | Must be a function . Callback to be executed when watcher thows an error . Defaults to ``` function(error) { console.log(`Watcher error: ${error}`);} ``` 93 | 94 | 95 | ###### Advance use example :helicopter: :airplane: 96 | 97 | At the starting we have shown the very basic use of `filewatcher-webpack-plugin` . Now as we are powered with the above api options lets use some of them to override the default 98 | 99 | ``` 100 | const filewatcherPlugin = require("filewatcher-webpack-plugin"); 101 | ... 102 | plugins: [ 103 | new filewatcherPlugin({ 104 | watchFileRegex: ['../js/**/*.js', '../style/**/*.css'], 105 | onReadyCallback: () => console.log('Yo Im ready'), 106 | usePolling: false, 107 | ignored: '/node_modules/' 108 | }), 109 | ], 110 | ... 111 | 112 | 113 | ``` 114 | 115 | ###### Support . :snowboarder: :spades: 116 | 117 | > Here I'm . [This is me](https://www.linkedin.com/in/saptarshi-chatterjee-55a22613) . Mail me if you see a problem (saptarshichatterjee1@gmail.com), and I generally reply back within 24 hours. -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const chokidar = require('chokidar'); 2 | 3 | function filewatcherPlugin(options) { 4 | this.options = options; 5 | } 6 | 7 | filewatcherPlugin.prototype.apply = function(compiler) { 8 | const options = this.options; 9 | compiler.plugin('done', function(compilation) { 10 | var watcher = chokidar.watch(options.watchFileRegex, { 11 | persistent: options.persistance || true, 12 | ignored: options.ignored || false, 13 | ignoreInitial: options.ignoreInitial || false, 14 | followSymlinks: options.followSymlinks || true, 15 | cwd: options.cwd || '.', 16 | disableGlobbing: options.disableGlobbing || false, 17 | usePolling: options.usePolling || true, 18 | interval: options.interval || 100, 19 | binaryInterval: options.binaryInterval || 300, 20 | alwaysStat: options.alwaysStat || false, 21 | depth: options.depth || 99, 22 | awaitWriteFinish: { 23 | stabilityThreshold: options.stabilityThreshold || 2000, 24 | pollInterval: options.pollInterval || 100 25 | }, 26 | 27 | ignorePermissionErrors: options.ignorePermissionErrors || false, 28 | atomic: options.atomic || true 29 | }); 30 | 31 | const callbackContext = { compiler, watcher }; 32 | watcher 33 | .on( 34 | 'add', 35 | options.onAddCallback ? options.onAddCallback.bind(callbackContext) : 36 | function(path) { 37 | return null; 38 | } 39 | ) 40 | .on( 41 | 'change', 42 | options.onChangeCallback ? options.onChangeCallback.bind(callbackContext) : 43 | function(path) { 44 | console.log(`\n\n Compilation Started after change of - ${path} \n\n`); 45 | compiler.run(function(err) { 46 | if (err) throw err; 47 | watcher.close(); 48 | }); 49 | console.log(`\n\n Compilation ended for change of - ${path} \n\n`); 50 | } 51 | ) 52 | .on( 53 | 'unlink', 54 | options.onUnlinkCallback ? options.onUnlinkCallback.bind(callbackContext) : 55 | function(path) { 56 | console.log(`File ${path} has been removed`); 57 | } 58 | ); 59 | 60 | watcher 61 | .on( 62 | 'addDir', 63 | options.onAddDirCallback ? options.onAddDirCallback.bind(callbackContext) : 64 | function(path) { 65 | console.log(`Directory ${path} has been added`); 66 | } 67 | ) 68 | .on( 69 | 'unlinkDir', 70 | options.unlinkDirCallback ? options.unlinkDirCallback.bind(callbackContext) : 71 | function(path) { 72 | console.log(`Directory ${path} has been removed`); 73 | } 74 | ) 75 | .on( 76 | 'error', 77 | options.onErrorCallback ? options.onErrorCallback.bind(callbackContext) : 78 | function(error) { 79 | console.log(`Watcher error: ${error}`); 80 | } 81 | ) 82 | .on( 83 | 'ready', 84 | options.onReadyCallback ? options.onReadyCallback.bind(callbackContext) : 85 | function() { 86 | console.log('Initial scan complete. Ready for changes'); 87 | } 88 | ) 89 | .on( 90 | 'raw', 91 | options.onRawCallback ? options.onRawCallback.bind(callbackContext) : 92 | function(event, path, details) { 93 | return null; 94 | } 95 | ); 96 | }); 97 | }; 98 | 99 | module.exports = filewatcherPlugin; 100 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "filewatcher-webpack-plugin", 3 | "version": "1.2.0", 4 | "description": "Watch files / folders not under webpack watch. Accepts glob pattern. Turbo powered by chokidar", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "./node_modules/.bin/mocha" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/sap9433/filewatcher-webpack-plugin" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "webpack file watch", 16 | "chokidar webpack" 17 | ], 18 | "author": "Saptarshi Chatterjee ", 19 | "license": "MIT", 20 | "homepage": "https://github.com/sap9433/filewatcher-webpack-plugin", 21 | "devDependencies": { 22 | "chai": "^4.2.0", 23 | "mocha": "^6.0.2", 24 | "path": "^0.12.7", 25 | "jsx-loader": "^0.13.2", 26 | "node-async-require-loader": "^2.0.0", 27 | "node-fetch": "^2.3.0", 28 | "react": "^16.8.6", 29 | "webpack": "^4.29.6", 30 | "webpack-dev-server": "^3.2.1" 31 | }, 32 | "dependencies": { 33 | "chokidar": "^2.1.5" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/fixtures/components/local-hello-world.rt: -------------------------------------------------------------------------------- 1 |

Hello World From Austin

-------------------------------------------------------------------------------- /test/fixtures/components/remote-hello-world.ajs: -------------------------------------------------------------------------------- 1 | module.exports={ 2 | remoteUrl:"https://jaydenlin.github.io/fake-remote-contents-for-test/contents/react-template/", 3 | localPath:"./test/fixtures/components/local-hello-world.rt" 4 | } -------------------------------------------------------------------------------- /test/fixtures/components/remote-hello-world.jsx: -------------------------------------------------------------------------------- 1 | var React = require('React'); 2 | // var helloTemplate = require("./local-hello-world.rt"); 3 | var helloTemplate = require("./remote-hello-world.ajs"); 4 | var Hello = React.createClass({ 5 | 6 | render: function() { 7 | return helloTemplate.apply(this); 8 | } 9 | 10 | }); 11 | 12 | module.exports = Hello; -------------------------------------------------------------------------------- /test/fixtures/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/fixtures/index.jsx: -------------------------------------------------------------------------------- 1 | var React=require("React"); 2 | var Root=require("./components/remote-hello-world.jsx"); 3 | React.render(,document.getElementById("root")); -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var chai = require('chai'); 2 | var webpack = require("webpack"); 3 | var webpackDevServer = require("webpack-dev-server"); 4 | var config = require("./webpack.config.js"); 5 | var expect = chai.expect; 6 | var fs = require("fs"); 7 | var path = require("path"); 8 | var fetch = require('node-fetch'); 9 | 10 | 11 | describe('watchFile-webpack-plugin', function(){ 12 | 13 | it('Change rt file content, webDevServer should hash code should change.', function(done){ 14 | this.timeout(50000); 15 | fs.writeFileSync(path.join(__dirname, "/fixtures/components/local-hello-world.rt"), "

Hello World From Local...!{this.props.name}

"); 16 | var compiler = webpack(config); 17 | var server = new webpackDevServer(compiler); 18 | server.listen(1024); 19 | fs.writeFileSync(path.join(__dirname, "/fixtures/components/local-hello-world.rt"), "

Hello World From Austin

"); 20 | fetch('http://localhost:1024/js/index.js') 21 | .then(function(res) { 22 | return res.text(); 23 | }).then(function(body) { 24 | expect(body.indexOf("Hello World From Austin")).to.not.equal(-1); 25 | done(); 26 | }); 27 | }); 28 | 29 | }); -------------------------------------------------------------------------------- /test/webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var path = require("path"), 3 | webpack = require("webpack"), 4 | watchFilePlugin = require("../index.js"); 5 | module.exports = { 6 | mode: 'development', 7 | cache: true, 8 | entry: { 9 | index: path.join(__dirname,"./fixtures/index.jsx") 10 | }, 11 | output: { 12 | path: path.join(__dirname, 'dist'), 13 | publicPath: "/", 14 | filename: 'js/[name].js' 15 | }, 16 | module: { 17 | rules:[ 18 | { 19 | test: /\.ajs$/, 20 | loader: ["node-async-require-loader?preParser=rt&async=false"] 21 | }, 22 | { 23 | test: /\.jsx$/, 24 | loader: ["jsx-loader?insertPragma=React.DOM&harmony"] 25 | } 26 | ] 27 | }, 28 | plugins: [ 29 | new watchFilePlugin({watchFolder: path.join(__dirname ,"/fixtures/components/"), watchExtension: "rt"}) 30 | ], 31 | externals: { 32 | 33 | }, 34 | resolve: { 35 | extensions: ['.js', '.jsx', '.ajs', '.html'], 36 | alias: {"React": path.join(__dirname,"../node_modules/react/index.js")} 37 | } 38 | }; -------------------------------------------------------------------------------- /with-great-power-comes-great-responsibility-spider-man-super-powers-abilities-voltaire-quote.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sap9433/filewatcher-webpack-plugin/37be4fd21df2a38c6197a9d46e115983c525b31c/with-great-power-comes-great-responsibility-spider-man-super-powers-abilities-voltaire-quote.jpg --------------------------------------------------------------------------------