Ofusca un build de webpack

@afterpack/webpack es un plugin de webpack 5: una clase con apply(compiler). Lee las directivas @afterpack de tu código fuente antes de la minificación y después ejecuta el motor en compilation.hooks.processAssets, en la última etapa antes de que webpack escriba.

Los bytes de cada asset se leen de la compilación y el reemplazo ofuscado se le devuelve, así que webpack nunca escribe tu bundle sin ofuscar. Una ofuscación fallida deja el directorio de salida como estaba.

Instalación

$ npm install -D @afterpack/webpack

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

export default {
  mode: "production",
  output: { path: "dist" },
  plugins: [new AfterpackWebpackPlugin()],
};

La exportación es la clase AfterpackWebpackPlugin.

Build

El plugin se engancha a compilation.hooks.processAssets en la última etapa antes de que webpack escriba. Solo se reescriben los assets .js, .mjs y .cjs que reclama algún chunk de la compilación; los chunks .hot-update. se omiten. Un asset que el compilador lleva pero no compiló, como un manifiesto que emitió otro plugin o un archivo copiado, se deja tal cual.

Un plugin de integridad que se engancha a afterProcessAssets sigue ejecutándose después de este pipeline, así que sus hashes se calculan sobre los bytes ofuscados.

processAssets se ejecuta en cada compilación, incluidas las recompilaciones en modo watch, y cada recompilación paga el coste del motor. Establece build.autorun: false (o AFTERPACK_build_autorun=false) para el ciclo de desarrollo y mantenlo activado en los builds de producción.

Verificación

El Protection Map se escribe por defecto cuando devtool produce un source map y el build no se ejecuta en CI (CI=true o CI=1); el modo de build de producción no lo desactiva. Un build de producción de webpack no tiene devtool por defecto, así que el mapa está desactivado. Pídelo de forma explícita:

new AfterpackWebpackPlugin({ protectionMap: { enabled: true } });

El valor por defecto del mapa depende de que exista un source map del bundler, así que establece devtool: "source-map" si quieres que muestre tu código fuente original. Sin él, el plugin avisa de que no encontró ningún source map del bundler. El archivo se escribe siempre en .afterpack/protectionMap.html, ignorado por git, nunca dentro de dist/. Contiene todo tu código fuente. Nunca lo subas al repositorio ni lo sirvas.

entitlements.jslight · complexity 5Open full size

entitlements.js, 54 lines, built at the light preset with a directive around the signature check. Click any token to see what was applied to it.

Opciones

Cualquier clave de configuración se puede pasar aquí en el objeto de opciones, por ejemplo new AfterpackWebpackPlugin({ preset: "hard", complexity: 40 }). Los nombres coinciden exactamente con los de @afterpack/vite y @afterpack/next, así que una configuración se puede llevar de un paquete a otro.

Directivas

El plugin lee las directivas de tu código fuente.

/* @afterpack preset=hard */
function verifyLicense(token) {
  // ...
}
/* @afterpack end */

Las directivas son solo comentarios de bloque: un comentario de línea // @afterpack … no se analiza y aparece como un diagnóstico. La gramática completa está en la página de Directivas.

La captura omite node_modules y los módulos que no son JS/TS. Establece directives.enabled: false para omitir el análisis por completo; las regions escritas a mano funcionan en cualquier caso.

Casos límite

Código de terceros. webpack empaqueta node_modules junto con tu código en los mismos chunks, así que no hay ningún patrón de nombre de archivo de salida que los separe. AfterPack trabaja sobre los archivos emitidos en su conjunto; paths.exclude es la exclusión a nivel de archivo cuando la necesites.
Falla de forma segura, sin posibilidad de anularlo. Un archivo fallido o un resultado vacío hace fallar el build en lugar de publicar código sin ofuscar.

Frameworks: la matriz completa.
Vite: la integración de referencia y la semántica completa de las opciones.
Configuración: cada opción de arriba y qué superficie puede establecerla.
Directivas: la gramática completa de los marcadores.
Presets: la escala con la que se resuelve preset.
Build y CI: semillas, desarrollo frente a producción, promocionar los mismos bytes.
Protection Map: cómo leer el informe.