@afterpack/webpack

A webpack obfuscation plugin for webpack 5. It obfuscates your production JavaScript inside the webpack build, using the AfterPack JavaScript obfuscator.

Install

npm install --save-dev @afterpack/webpack

Usage

// webpack.config.mjs
import { AfterpackWebpackPlugin } from "@afterpack/webpack";

export default {
  // ...
  plugins: [new AfterpackWebpackPlugin()],
};

The plugin obfuscates each JavaScript asset your chunks produce at the last step before webpack writes to disk, so the readable bundle is never written. Hot-update chunks and assets other plugins copy in are left alone. If obfuscation fails, the build fails.

Subresource integrity plugins such as webpack-subresource-integrity are not supported: they hash each chunk before AfterPack rewrites it, so the recorded hashes would not match the files you ship.

Each build writes a protection receipt, .afterpack-protection.json, into the output directory. Run npx afterpack verify dist in your deploy step to check that what you ship is what was obfuscated.

Options

new AfterpackWebpackPlugin({ preset: "hard", seed: "git" });

| Option | What it does | Default | | --- | --- | --- | | preset | "minify", "light", "medium", "hard" or "extreme" | "light" | | seed | a number or string; "git" uses the current commit | a new random seed per build | | identifiers.reserved | names never to rename | none | | paths.exclude | globs for files to leave untouched | none | | sourceMap.enabled | write source maps for the obfuscated output; off also drops the build's CSS maps | on in development when webpack emits a map, off in production | | protectionMap.enabled | write the Protection Map | on when devtool emits source maps | | build.autorun | false turns AfterPack off | true |

Dotted names are nested objects: sourceMap.enabled is { sourceMap: { enabled: true } }. Every other option is in the configuration reference.

/* @afterpack */ directives that raise protection for a region are a Pro feature. They need a devtool that emits source maps, such as "source-map". Without one, the plugin skips them and tells you.

The Protection Map is written to .afterpack/, outside webpack's output; that directory carries its own .gitignore and self-ignores. It contains your original source, so never deploy or commit it.

Options can also live in afterpack.json or in AFTERPACK_* environment variables. The options object wins over the environment, which wins over the file. An unknown or misspelled key fails the build and names the right spelling.

Pro

Without a key, AfterPack runs on your machine with the full pipeline at any preset. Set AFTERPACK_KEY in your environment and the same plugin builds in AfterPack's cloud instead, which adds per-region directives and two hardening transforms you can turn on: self-integrity (anti-tamper) and comparison hardening. Keep the key out of your webpack config: the plugin rejects it there. See AfterPack Pro.

Not supported here

• build.backup: the output goes back to webpack in memory, so there is no file to back up.
• paths.include: the plugin works on webpack's assets and does not walk the output directory.

Links

• webpack setup guide
• Presets and protection levels
• A javascript-obfuscator alternative: how AfterPack compares
• Protecting pricing logic

License

Apache-2.0. The engine it runs, @afterpack/core, has its own license.

Feedback

Questions, suggestions and bug reports: afterpack.dev/contact. You can also file a bug on GitHub Issues.