# webpack build को obfuscate करें

@afterpack/webpack, compilation.hooks.processAssets पर tap करता है और webpack के लिखने से पहले आपके assets को obfuscate करता है।

Source: https://www.afterpack.dev/hi/docs/frameworks/webpack

`@afterpack/webpack` एक webpack 5 plugin है: `apply(compiler)` वाली एक class। यह minification से पहले आपके source से [`@afterpack` directives](https://www.afterpack.dev/hi/docs/directives) पढ़ता है, फिर `compilation.hooks.processAssets` पर, webpack के content-hashed नाम तय करने के ठीक बाद और लिखने से पहले, engine चलाता है।

हर asset के bytes compilation से पढ़े जाते हैं और obfuscated replacement उसे वापस सौंप दिया जाता है, इसलिए webpack आपका unobfuscated bundle कभी नहीं लिखता। विफल obfuscation output directory को वैसा ही छोड़ देता है जैसी वह थी।

## Install

```bash
npm install -D @afterpack/webpack
```

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

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

Export `AfterpackWebpackPlugin` class है।

## Build

Plugin webpack के content-hashing stage के ठीक बाद `compilation.hooks.processAssets` पर tap करता है। हर chunk का नाम [उसके obfuscated bytes के साथ चलता है](https://www.afterpack.dev/hi/docs/builds#file-names-and-caching)। केवल वे `.js`, `.mjs` और `.cjs` assets फिर से लिखे जाते हैं जिन पर compilation का कोई chunk दावा करता है; `.hot-update.` chunks छोड़ दिए जाते हैं। ऐसा asset जिसे compiler साथ रखता है पर जिसे उसने build नहीं किया, जैसे किसी दूसरे plugin द्वारा emit किया गया manifest या copy की गई फ़ाइल, अछूता छोड़ दिया जाता है।

Compression plugins बाद के stage पर चलते हैं, इसलिए वे obfuscated bytes को compress करते हैं।

`processAssets` हर compilation पर चलता है, watch mode के rebuilds समेत, और हर rebuild engine की लागत चुकाता है। Dev loop के लिए [`build.autorun: false`](https://www.afterpack.dev/hi/docs/config#build-autorun) (या `AFTERPACK_build_autorun=false`) सेट करें और production builds के लिए इसे चालू रखें।

## Verify

[Protection Map](https://www.afterpack.dev/hi/docs/protection-map) डिफ़ॉल्ट रूप से तब लिखा जाता है जब `devtool` source map बनाए और build CI (`CI=true` या `CI=1`) में न चल रही हो; [production build mode](https://www.afterpack.dev/hi/docs/config#build-mode) इसे बंद नहीं करता। Production webpack build में डिफ़ॉल्ट रूप से कोई `devtool` नहीं होता, इसलिए map बंद रहता है। इसे स्पष्ट रूप से माँगें:

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

[Map का default](https://www.afterpack.dev/hi/docs/config#protectionMap-enabled) bundler sourcemap की मौजूदगी से जुड़ा है, इसलिए अगर आप चाहते हैं कि यह आपका मूल source render करे, तो `devtool: "source-map"` सेट करें। उसके बिना, plugin चेतावनी देता है कि उसे कोई bundler source map नहीं मिला। लिखे जाने पर map gitignored `.afterpack/protectionMap.html` में जाता है, कभी `dist/` में नहीं। इसमें आपका पूरा source होता है। इसे कभी commit या serve न करें।

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) यहाँ options object के रूप में दी जा सकती है, उदाहरण के लिए `new AfterpackWebpackPlugin({ preset: "hard", complexity: 40 })`। Names [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#options) और [`@afterpack/next`](https://www.afterpack.dev/hi/docs/frameworks/nextjs#options) से हूबहू मेल खाते हैं, इसलिए config packages के बीच portable है।

## Directives

Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं। [Free build](https://www.afterpack.dev/hi/docs/directives#free-builds) में protection बढ़ाने वाला directive build को `DIAG_PRO_DIRECTIVE_REQUIRES_KEY` के साथ रोक देता है।

Plugin directives को आपके source से पढ़ता है।

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

Directives केवल block comments होते हैं: `// @afterpack …` line comment scan नहीं होता और एक [diagnostic](https://www.afterpack.dev/hi/docs/diagnostics) के रूप में सामने आता है। पूरी grammar [Directives](https://www.afterpack.dev/hi/docs/directives#writing-one) पेज पर है।

Capture `node_modules` और non-JS/TS modules को छोड़ देता है। Scan को पूरी तरह छोड़ने के लिए [`directives.enabled: false`](https://www.afterpack.dev/hi/docs/config#directives-enabled) सेट करें; हाथ से लिखे [`regions`](https://www.afterpack.dev/hi/docs/config#regions) दोनों हालात में काम करते हैं।

## Edge cases

- **Vendored code।** webpack `node_modules` को आपके chunks में साथ bundle करता है, इसलिए कोई output-filename pattern नहीं है जो उन्हें अलग करे। AfterPack emit की गई फ़ाइलों पर समग्र रूप से काम करता है; ज़रूरत पड़ने पर [`paths.exclude`](https://www.afterpack.dev/hi/docs/config#paths-exclude) फ़ाइल-स्तर पर अलग करने का तरीका है।
- **`webpack-subresource-integrity` अस्वीकार है।** उसके `integrity` attributes obfuscated chunks से मेल नहीं खाएँगे। उसे हटाएँ, और build के बाद emit की गई फ़ाइलों से integrity compute करें।
- **Fail-closed, बिना किसी override के।** विफल फ़ाइल या खाली result unobfuscated code ship करने के बजाय build को विफल कर देता है।

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी matrix।
- [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite): reference integration और options का पूरा अर्थ।
- [Configuration](https://www.afterpack.dev/hi/docs/config): ऊपर का हर option, और कौन-सी surface उसे सेट कर सकती है।
- [Directives](https://www.afterpack.dev/hi/docs/directives): पूरी marker grammar।
- [Presets](https://www.afterpack.dev/hi/docs/presets): वह सीढ़ी जिसके विरुद्ध `preset` resolve होता है।
- [Builds और CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev-बनाम-prod, वही bytes promote करना।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): रिपोर्ट को पढ़ना।