webpack build को obfuscate करें

@afterpack/webpack एक webpack 5 plugin है: apply(compiler) वाली एक class। यह minification से पहले आपके source से @afterpack directives पढ़ता है, फिर compilation.hooks.processAssets पर, webpack के लिखने से पहले के आख़िरी stage पर, engine चलाता है।

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

Install

$ npm install -D @afterpack/webpack

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

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

Export AfterpackWebpackPlugin class है।

Build

Plugin webpack के लिखने से पहले के आख़िरी stage पर compilation.hooks.processAssets पर tap करता है। केवल वे .js, .mjs और .cjs assets फिर से लिखे जाते हैं जिन पर compilation का कोई chunk दावा करता है; .hot-update. chunks छोड़ दिए जाते हैं। ऐसा asset जिसे compiler साथ रखता है पर जिसे उसने build नहीं किया, जैसे किसी दूसरे plugin द्वारा emit किया गया manifest या copy की गई फ़ाइल, अछूता छोड़ दिया जाता है।

afterProcessAssets पर tap करने वाला integrity plugin इस pipeline के बाद भी चलता है, इसलिए उसके hashes obfuscated bytes पर गणना किए जाते हैं।

processAssets हर compilation पर चलता है, watch mode के rebuilds समेत, और हर rebuild engine की लागत चुकाता है। Dev loop के लिए build.autorun: false (या AFTERPACK_build_autorun=false) सेट करें और production builds के लिए इसे चालू रखें।

Verify

Protection Map डिफ़ॉल्ट रूप से तब लिखा जाता है जब devtool source map बनाए और build CI (CI=true या CI=1) में न चल रही हो; production build mode इसे बंद नहीं करता। Production webpack build में डिफ़ॉल्ट रूप से कोई devtool नहीं होता, इसलिए map बंद रहता है। इसे स्पष्ट रूप से माँगें:

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

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

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.

Options

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

Directives

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

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

Directives केवल block comments होते हैं: // @afterpack … line comment scan नहीं होता और एक diagnostic के रूप में सामने आता है। पूरी grammar Directives पेज पर है।

Capture node_modules और non-JS/TS modules को छोड़ देता है। Scan को पूरी तरह छोड़ने के लिए directives.enabled: false सेट करें; हाथ से लिखे regions दोनों हालात में काम करते हैं।

Edge cases

Vendored code। webpack node_modules को आपके chunks में साथ bundle करता है, इसलिए कोई output-filename pattern नहीं है जो उन्हें अलग करे। AfterPack emit की गई फ़ाइलों पर समग्र रूप से काम करता है; ज़रूरत पड़ने पर paths.exclude फ़ाइल-स्तर पर अलग करने का तरीका है।
Fail-closed, बिना किसी override के। विफल फ़ाइल या खाली result unobfuscated code ship करने के बजाय build को विफल कर देता है।

आगे

Frameworks: पूरी matrix।
Vite: reference integration और options का पूरा अर्थ।
Configuration: ऊपर का हर option, और कौन-सी surface उसे सेट कर सकती है।
Directives: पूरी marker grammar।
Presets: वह सीढ़ी जिसके विरुद्ध preset resolve होता है।
Builds और CI: seeds, dev-बनाम-prod, वही bytes promote करना।
Protection Map: रिपोर्ट को पढ़ना।