javascript-obfuscator / javascript-obfuscator/webpack-obfuscator

Switching from angular.json to webpack-obfuscator

Open
#71 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
928
Forks
92
PR merge metrics
No merged PRs in 30d

Description

Hello,

I'm very sorry to ask such a basic question but I need guidance. I've got currently in my angular.json for the build:

```
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-editor/assets/monaco",
"output": "/assets/monaco"
}

],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/angular-notifier/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-dark/theme.css",
"node_modules/primeng/resources/primeng.min.css"

],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
```
This is fairly standard; we've not changed much. So firstly I install the custom webpack dependency:

npm i @angular-builders/custom-webpack -D

Then I have to configure the custom-webpack to include the obfuscation so I modify the above to the following:

```
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js",
"replaceDuplicatePlugins": true
},
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ngx-monaco-editor/assets/monaco",
"output": "/assets/monaco"
}

],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/angular-notifier/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-dark/theme.css",
"node_modules/primeng/resources/primeng.min.css"

],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
```

I then reference the obfuscation file custom-webpack.config.js which is as follows:

```
// webpack.config.js
'use strict';

const JavaScriptObfuscator = require('webpack-obfuscator');

module.exports = {
entry: {
'main': "dist/main.js",
},
output: {
path: 'dist',
filename: '[name].obs.js' // output: abc.js, cde.js
},
plugins: [
new JavaScriptObfuscator({
rotateUnicodeArray: true
}, [])
]
};
```
I'm on Angular 8.3.25 but this is giving me 'An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.'.

Again; I'm sorry if this is not specific to this tool but I'm unsure how to get from the angular.json I have now to the obfuscation detailed in the guide?

I'm happy to write this up in a detailed tutorial when done!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the Angular 8 build configuration in angular.json and the custom-webpack.config.js example, then reproduce the '..getProjectMetadata' error using the reported setup. Check how @angular-builders/custom-webpack integrates the browser builder and how webpack-obfuscator expects its entry and output configuration. Done means the Angular production build completes and the obfuscation configuration is applied without that exception.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, javascript, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.