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, justo después de que webpack asigne los nombres con hash de contenido y antes de que 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 justo después de la etapa en la que webpack calcula los hashes de contenido. El nombre de cada chunk sigue a sus bytes ofuscados. 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.

Los plugins de compresión se ejecutan en una etapa posterior, así que comprimen 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. Cuando se escribe, el mapa va a .afterpack/protectionMap.html, ignorado por git, nunca dentro de dist/. Contiene todo tu código fuente. Nunca lo subas al repositorio ni lo sirvas.

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

Las directivas son una función Pro. En un build Free, una directiva que aumenta la protección detiene el build con DIAG_PRO_DIRECTIVE_REQUIRES_KEY.

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.
• webpack-subresource-integrity se rechaza. Sus atributos integrity no coincidirían con los chunks ofuscados. Elimínalo y calcula la integridad a partir de los archivos emitidos después del build.
• 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.

Siguiente

• 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.