/

Webpack Integration

Webpack Version Compatibility

For Webpack 4.x: Use @bytehide/webpack4-shield package instead of @bytehide/webpack-shield. See the Webpack 4 section below for details.

ByteHide Shield provides a dedicated Webpack plugin that allows you to seamlessly protect your JavaScript code during the build process. This guide explains how to install and configure the Shield Webpack plugin.

Installation

Install the ByteHide Shield Webpack plugin from npm:

npm install --save-dev @bytehide/webpack-shield

Or with yarn:

yarn add --dev @bytehide/webpack-shield

Webpack 4.x

For Webpack 4 compatibility, install the dedicated package:

npm install --save-dev @bytehide/webpack4-shield

Or with yarn:

yarn add --dev @bytehide/webpack4-shield

Basic Setup

Webpack 5.x Setup

Add the Shield plugin to your Webpack configuration:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token', // Required: Get this from your ByteHide account
    })
  ]
};

Webpack 4.x Setup

For Webpack 4, use the dedicated plugin:

const ByteHideShieldPlugin = require('@bytehide/webpack4-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token', // Required: Get this from your ByteHide account
    })
  ]
};

With this minimal configuration, Shield will apply default protections to your bundled code.

Webpack 4 Compatibility

If you're using Webpack 4.x, you need to use the dedicated @bytehide/webpack4-shield package. This version has been specifically adapted for Webpack 4 compatibility.

Key Differences from Webpack 5 Version

This version has been specifically adapted for Webpack 4 compatibility:

API Changes

  • Plugin Registration: Uses compiler.plugin('emit', ...) instead of compiler.hooks.emit.tapAsync()
  • Asset Creation: Uses function-based asset objects compatible with Webpack 4
  • Promise Handling: Adapted async handling for Webpack 4's callback-based system

Webpack 4 Specific Features

  • Compatible with Webpack 4.0.0 and above
  • Uses legacy plugin API for maximum compatibility
  • Optimized for Webpack 4's asset processing system

Requirements for Webpack 4

  • Node.js: >= 8.0.0
  • Webpack: ^4.0.0
  • Webpack CLI: ^3.3.12
  • Webpack Dev Server: ^3.11.3

Migration from Webpack 5

If you're downgrading from Webpack 5 or need Webpack 4 compatibility:

  1. Install this package: npm install @bytehide/webpack4-shield
  2. Update your webpack config to require this package instead
  3. No configuration changes needed - all options remain the same

Webpack 4 vs 5 Comparison

FeatureWebpack 4Webpack 5
Plugin APIcompiler.plugin()compiler.hooks.emit.tapAsync()
Asset ObjectsFunction-basedArrow function syntax
Node.js Support>= 8.0.0>= 10.13.0
Package Name@bytehide/webpack4-shield@bytehide/webpack-shield

Configuration Options

The Webpack plugin accepts the following options:

OptionTypeDefaultDescription
projectTokenstringRequiredYour ByteHide project token
replacebooleanfalseWhether to replace original files with obfuscated versions
obfuscatedExtensionstring'.obf'File extension for obfuscated files (when replace is false)
excludestring[][]Files or patterns to exclude from obfuscation
configObject{}ByteHide Shield configuration options
includestring[]['.js', '.mjs', '.cjs', '.jsx']File extensions to process

Advanced Configuration

For more advanced use cases, you can provide additional Shield protection options:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      replace: false,
      obfuscatedExtension: '.obf',
      exclude: ['vendor.js', 'polyfills.js'],
      include: ['.js', '.mjs', '.cjs', '.jsx'],
      config: {
        controlFlowFlattening: true,
        debugProtection: true,
        devtoolsBlocking: true,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        selfDefending: true,
        identifierNamesGenerator: 'hexadecimal'
      }
    })
  ]
};

Environment-Specific Configuration

You can apply different protection settings based on the environment:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  
  return {
    // ... your webpack configuration ...
    plugins: [
      // Only apply Shield in production builds
      isProd && new ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
        replace: true,
        config: {
          // More aggressive settings for production
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true
        }
      })
    ].filter(Boolean) // Filter out falsy plugins
  };
};

File Exclusions

You can exclude specific files from obfuscation using the exclude option:

const ByteHideShieldPlugin = require('@bytehide/webpack-shield');

module.exports = {
  // ... your webpack configuration ...
  plugins: [
    new ByteHideShieldPlugin({
      projectToken: 'your-project-token',
      exclude: [
        'node_modules/**/*.js', // Exclude all node_modules
        'src/vendor/**/*.js',    // Exclude vendor files
        'src/polyfills.js'       // Exclude specific file
      ]
    })
  ]
};

Features

The Webpack plugin for ByteHide Shield provides the following features:

  • Advanced Obfuscation: Implements various obfuscation techniques to protect your code
  • JavaScript file protection: Compatible with .js, .mjs, .cjs, and .jsx files
  • Build-time obfuscation: Integrate protection directly into your build process
  • Watermarking for protected files: Add watermarks to identify protected code

Complete Example

Here's a complete example of a Webpack configuration with Shield:

const path = require('path');
const ByteHideShieldPlugin = require('@bytehide/webpack-shield');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production';
  
  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        }
      ]
    },
    optimization: {
      minimize: isProd,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            format: {
              comments: false,
            },
          },
          extractComments: false,
        }),
      ],
    },
    plugins: [
      isProd && new ByteHideShieldPlugin({
        projectToken: process.env.BYTEHIDE_PROJECT_TOKEN || 'your-project-token',
        replace: true,
        exclude: ['vendor/**/*.js'],
        config: {
          controlFlowFlattening: true,
          debugProtection: true,
          devtoolsBlocking: true,
          stringArray: true,
          stringArrayEncoding: ['base64'],
          selfDefending: true,
          identifierNamesGenerator: 'hexadecimal',
          reservedNames: [
            '^React$', '^useState$', '^useEffect$',
            '^render$', '^Component$'
          ]
        }
      })
    ].filter(Boolean),
    devtool: isProd ? false : 'source-map'
  };
};

Example Output

If you have an index.js file with this content:

console.log("Hello, world!");

The processed result will include a unique marker and the obfuscated code:

// _0xBHSHLD_<uniqueId>_marker
console.log(_0x123456("Hello, world!"));

Troubleshooting

Common Issues

Network Error

If you encounter network errors during the build process:

  • Ensure you have an active internet connection as the plugin uses a remote service for code obfuscation
  • Check if your network firewall is blocking requests to the ByteHide service

Invalid Token

If you see an error about an invalid token:

  • Verify that your project token is valid and correctly typed
  • Make sure the token has permissions for JavaScript projects

Next Steps

Previous
Next.js
Next
Angular