javascript-obfuscator / javascript-obfuscator/webpack-obfuscator
Switching from angular.json to webpack-obfuscator
- 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