✨ Add a new option, hotDev.

Author: momocow

lib/index.js

@@ -23,16 +23,25 @@ const fileDependencies = new Set()
 module.exports = class WebpackUserscript {
   /**
    * @typedef WebpackUserscriptOptions
-   * @property {object} headers the header object
+   * @property {object|string|((data: object) => object)} headers the header object
    * @property {boolean} metajs to generate *.meta.js
    * @property {boolean} pretty to prettify the header block
    * @property {boolean} renameExt to rename *.js files that are not *.user.js to become *.user.js
+   * @property {object} hotDev Use \"@require\" keyword in the meta block to include the script
    *//**
-   * @param {WebpackUserscriptOptions} [options]
+   * @param {WebpackUserscriptOptions|string|((data: object) => object)} [options]
    */
   constructor (options = {}) {
     validateOptions(optionsSchema, options, PLUGIN_NAME)
 
+    options.hotDev = Object.assign({
+      baseUrl: 'http://localhost:8080/',
+      filename: '[basename]-dev.user.js',
+      enable: process.env.WEBPACK_DEV_SERVER === 'true'
+    }, options.hotDev)
+    options.hotDev.enable = typeof options.hotDev.enable === 'function'
+      ? options.hotDev.enable() : options.hotDev.enable
+
     this.options = Object.assign(
       {},
       DEFAULT_CONFIG,
@@ -98,13 +107,8 @@ module.exports = class WebpackUserscript {
               ...packageInfoObj
             }
 
-            const headerString = userscriptMeta.stringify(
-              interpolate(
-                headerProvider(data),
-                data
-              ),
-              this.options.pretty
-            )
+            const headerObj = interpolate(headerProvider(data), data)
+            const headerString = userscriptMeta.stringify(headerObj, this.options.pretty)
 
             const outputFile = this.options.renameExt && !file.endsWith('.user.js')
               ? file.replace(/\.js$/, '') + '.user.js'
@@ -122,12 +126,24 @@ module.exports = class WebpackUserscript {
               fileSource
             )
 
+            let hotDevHeaderString = ''
+            if (this.options.hotDev.enable) {
+              const hotDevBaseUrl = interpolate(this.options.hotDev.baseUrl, data)
+              const hotDevFilename = interpolate(this.options.hotDev.filename, data)
+              hotDevHeaderString = userscriptMeta.stringify({
+                ...headerObj,
+                require: `${hotDevBaseUrl.replace(/\/$/, '')}/${outputFile}`
+              }, this.options.pretty)
+              compilation.assets[hotDevFilename] = new RawSource(hotDevHeaderString)
+            }
+
             if (this.options.metajs) {
               const basename = file.endsWith('.user.js') ? path.basename(file, '.user.js')
                 : file.endsWith('.js') ? path.basename(file, '.js')
                   : file
               const metaFile = basename + '.meta.js'
-              compilation.assets[metaFile] = new RawSource(headerString)
+              compilation.assets[metaFile] = new RawSource(
+                this.options.hotDev.enable ? hotDevHeaderString : headerString)
             }
           }
         }

lib/schemas/header.json

@@ -36,6 +36,25 @@
         "renameExt": {
           "description": "To rename *.js files that are not *.user.js to become *.user.js",
           "type": "boolean"
+        },
+        "hotDev": {
+          "description": "Use \"@require\" keyword in the meta block to include the script",
+          "type": "object",
+          "properties": {
+            "baseUrl": {
+              "description": "The base URL of the dev server",
+              "typeof": "string"
+            },
+            "filename": {
+              "typeof": "string"
+            },
+            "enable": {
+              "anyOf": [
+                { "typeof": "function" },
+                { "type": "boolean" }
+              ]
+            }
+          }
         }
       },
       "additionalProperties": false