Create option for a script that loads from file

[Trinovantes]

Currently for my dev workflow, I install the example.meta.js file and then manually add this line to the file via the browser editor:

// @require file:///path\to\dist\example.user.js

Can you create a new option that automatically generates a *.load-local.js (can be any name) file that's basically the meta file and that require line?

I'm not using the proxy script option for dev because it requires 2-3 reloads after every change vs 1 reload when loading from file (on Tampermonkey/Chrome). I also can't specify the @require in the headers option because it'll get included in the user.js file as well, causing it to require itself.

[momocow]

1 reload when loading from file (on Tampermonkey/Chrome)

If it is true, it's sure a great news!!! Thank you for the information!

I think the proxy script feature can be extended to support local file:// protocol in order to make use of the 1-reload behavior.

[Trinovantes]

Yea, it seems Tampermonkey doesn't cache local files so it gets refreshed every page load

I just need to make sure webpack dev server writes to file

    devServer: {
        writeToDisk: true,
        inline: false, // No need for webpack dev server to auto reload since we're manually reloading. This disables the cross origin errors from WDS trying to connect to localhost
    },

    plugins: [
        new WebpackUserscript(...)
    ]

and enable "Allow access to file URLs" under Extensions -> Tampermonkey

[tao-cumplido]

you don't have to do this manually, just use baseUrl: require('url').pathToFileURL(<devServer.contentBase>).href in your proxyScript config

[Trinovantes]

Thanks! I'm able to resolve this with this config:

import url from 'url'
const baseUrl = url.pathToFileURL(path.resolve(__dirname, 'dist')).href

export default {
    devServer: {
        writeToDisk: true,
        inline: false,
    },
    output: {
        filename: 'example.user.js',
    },
    plugins: [
        new WebpackUserscript({
            proxyScript: {
                enable: (process.env.NODE_ENV === 'development'),
                baseUrl: baseUrl,
            },
        }),
    ],
}

And then installing http://localhost:8080/example.proxy.user.js