Package Exports

webpack-userscript

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (webpack-userscript) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

webpack-userscript

A Webpack4+ plugin for userscript projects.

The package has been renamed from webpack-tampermonkey.

Features

Make your userscript development combined 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 .user.js and .meta.js

.meta.js is used for update check containing headers only.
Properly track files in watch mode

Including external header files and package.json.

Installation

npm i webpack-userscript -D

Usage

webpack.config.js

Include the plugin in the webpack.config.js as the following example.

const WebpackUserscript = require('webpack-userscript')

module.exports = {
  plugins: [
    new WebpackUserscript()
  ]
}

Examples

Examples can be found under the test fixture folder.

Configuration

WebpackUserscript

The WebpackUserscript constructor has the following signature.

new WebpackUserscript(options)

options

Also see the schema of options.

type WebpackUserscriptOptions =
  WPUSOptions |
  HeaderFile |   // shorthand for WPUSOptions.headers
  HeaderProvider // shorthand for WPUSOptions.headers

WPUSOptions

interface WPUSOptions {
  headers: HeaderFile | HeaderProvider

  /**
   * Output *.meta.js or not
   */
  metajs: boolean

  /**
   * Rename all .js files to .user.js files.
   */
  renameExt: boolean

  /**
   * Prettify the header
   */
  pretty: boolean
}

HeaderFile

A path to a js or json file which exports a header object or a header provider function.

type HeaderFile = string

HeaderProvider

A function that returns a header object.

type HeaderProvider = (data: object) => HeaderObject

Note that data contains the same variables as output.filename templates.

HeaderObject

A header object.

Also see explicit-config/webpack.config.js.

type HeaderFile = object