A Webpack4+ plugin for userscript projects. 🙈
The package has been renamed from
- Combine your userscript development with Webpack
With powerful Webpack support, you can even package everything in your userscript, e.g. icons and json data.
- Ability to generate userscript headers
- Ability to generate both
.meta.jsis used for update check containing headers only.
- Properly track files in watch mode
Including external header files and package.json.
npm i webpack-userscript -D
Include the plugin in the
webpack.config.js as the following example.
const WebpackUserscript =moduleexports =plugins:
The following example can be used in development mode with the help of
webpack-dev-server will build the userscript in watch mode. Each time the project is built, the
buildNo variable will increase by 1.
In the following configuration, a portion of the
version contains the
buildNo; therefore, each time there is a build, the
version is also increased so as to indicate a new update available for the script engine like Tampermonkey or GreaseMonkey.
After the first time starting the
webpack-dev-server, you can install the script via
http://localhost:8080/<project-name>.user.js (the URL is actually refered to your configuration of
webpack-dev-server). Once installed, there is no need to manually reinstall the script until you stop the server. To update the script, the script engine has an update button on the GUI for you.
const path =const WebpackUserscript =const dev = processenvNODE_ENV === 'development'moduleexports =mode: dev ? 'development' : 'production'entry: pathoutput:path: pathfilename: '<project-name>.user.js'devServer:contentBase: pathplugins:headers:version: dev ? `[version]-build.[buildNo]` : `[version]`
Other examples can be found under the test fixture folder.
WebpackUserscript constructor has the following signature.
Also see the schema of options.
A path to a js or json file which exports a header object or a header provider function.
A function that returns a header object.
A header object, whose leaves are webpack-like template strings in
[<var_name>] format. Available variables can be found at DataObject.
Local variables used to interpolate the templates of a HeaderObject.
Also see template-strings/webpack.config.js.