BYTEHIDE SHIELD FOR WEBPACK
Webpack Obfuscator
Protect your Webpack bundle against reverse engineering, copying, and tampering. ByteHide Shield adds obfuscation as a step in your Webpack build.
Get started
Webpack
npm install --save-dev @bytehide/webpack-shield
// webpack.config.js
const ByteHideShieldPlugin = require('@bytehide/webpack-shield');
module.exports = { plugins: [new ByteHideShieldPlugin({ projectToken: 'YOUR_TOKEN' })] };Add ByteHideShieldPlugin to your Webpack plugins with your project token. Webpack 4 uses @bytehide/webpack4-shield with the same configuration.
Full setup guide in the docsFree to use with a ByteHide account
The first time Shield runs, it asks for a project token that connects it to your account. The package is free.
Get your free tokenHow it works
How to obfuscate a Webpack bundle
Webpack bundles your project into the JavaScript files that ship. Shield protects that bundle as a Webpack plugin. Three steps.
Step 01
Install the Webpack plugin
Add @bytehide/webpack-shield (or webpack4-shield for Webpack 4) as a dev dependency.
Step 02
Add the plugin to your config
Add ByteHideShieldPlugin to your webpack plugins with your project token.
Step 03
Build as usual
Run your Webpack build. Shield protects the bundle output automatically.
Why obfuscate
Why obfuscate a Webpack bundle
Webpack bundles your application into the JavaScript files that ship to the browser. Whatever your project does, the bundle holds it, readable.
- The bundle is your whole frontend in one placeWebpack combines your modules into bundles. That output contains your application logic, and without obfuscation it is readable.
- Bundling does not protect your codeMinification and bundling make code compact, not secure. Beautifying a minified bundle restores readable logic. Obfuscation is what actually protects it.
- Protect the bundle, the final artifactThe bundle is what users receive. Obfuscating it protects exactly what an attacker would inspect.
Example
See Webpack obfuscation in action
Obfuscation is easier to understand when you see it. Here is a small module before and after Shield protects the Webpack bundle output.
function validateLicense(key) {
const validKey = 'ByteH1de!2026';
return key === validKey;
}
function getUserPlan(userId) {
const endpoint = 'https://api.bytehide.com/plans';
return fetch(endpoint + '/' + userId);
}
module.exports = { validateLicense, getUserPlan };var _0xc4=['a3f1','7b2d','e59c'];function _0x3e(k){var _s=0;while(1)switch(_s){
case 0: _0xc4[2]=_dec(0x2c); _s=1; break;
case 1: return k===_0xc4[0];
}}function _0x8b(_0xd){var _0xf=_dec(0x41);return fetch(_0xf+'/'+_0xd);}
module.exports={_0x3e:_0x3e,_0x8b:_0x8b};Same behavior, unreadable result. The bundle output reveals nothing about your application logic or endpoints.
What it covers
What ByteHide Shield protects in your Webpack bundle
Shield applies its protection to the JavaScript bundle Webpack produces. Here is what that covers.
- Your application logicThe functions, classes, and algorithms in your modules become unreadable in the shipped bundle. The behavior is identical, the logic is not legible.
- Your stringsAPI endpoints, keys, messages, and configuration values are encrypted, so they cannot be read by scanning the bundle.
- Your control flowThe structure of your logic is reshaped so the program flow cannot be followed, even after the bundle is beautified.
- The bundle, every buildProtection runs as part of your build pipeline, so every release ships obfuscated automatically. There is no manual step to forget.
The bundle is the artifact your users get. Shield protects exactly that.
Build order
Why you obfuscate after bundling, not before
When you obfuscate matters as much as how. With Webpack, the correct order is bundle first, then protect.
- The correct order: bundle, then protectShield runs after Webpack bundles. Protecting source files before bundling can interfere with Webpack's optimizations and module resolution.
- Protecting the bundle keeps optimizations intactThe bundle already includes minification and tree-shaking. Shield protects that final, optimized output, which is also more efficient than protecting many small files.
- Exclude vendor and polyfill filesThird-party bundles like vendor files do not need obfuscation. Shield's exclude option keeps them out.
Bundle first. Protect what ships.
Free tool vs Shield
Free obfuscator vs ByteHide Shield
For a quick test of a single JavaScript file, the free online obfuscator is enough. For a real Webpack project, ByteHide Shield protects the whole build.
ByteHide Shield
Production-grade protection
The free online tool obfuscates single JavaScript files. ByteHide Shield protects a full Webpack bundle, built into your pipeline.
Open the free JavaScript obfuscatorFrequently asked questions
What is a Webpack obfuscator?
How do I add Shield to Webpack?
Should I obfuscate before or after bundling?
Does it work with Webpack 4?
Is it free?
Will obfuscation affect bundle size or performance?
What is the best Webpack obfuscator?
Protect your Webpack bundle with
ByteHide Shield
Obfuscation is one layer. ByteHide Shield adds code virtualization, runtime self-protection, and advanced configuration, integrated as a Webpack plugin.
