What are the differences between Webpack and JShaman?

2023-10-16 13:30
文章标签 webpack differences jshaman

本文主要是介绍What are the differences between Webpack and JShaman?，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

What are the differences between Webpack and JShaman?

Webpack's function is to bundle multiple JS files into one JS file.

JShaman is specifically designed for obfuscating and encrypting JS code, with the goal of making JavaScript code unreadable, obfuscating functional logic, and encrypting hidden data or characters in the code for code protection.

The two are completely different. However, because the JS file generated by Webpack bundling may also have some obfuscation features, it is often mistakenly regarded by some people as an obfuscation tool. In fact, it is not.

Here is an example to demonstrate the difference between the two: In this example, we use two files, example.js and mod.js.

Example.js file code

var mod = require("./mod.js");
mod.fun();
console.log("done.");

Mod.js file code

exports.fun = function (){var name = "Tom"var age = 100;console.log(name + " is " + age + " years old.");
}

The code logic is very simple. example.js calls the function in mod.js, and when run, it outputs two lines of information, as shown in the figure below.

Next, let's demonstrate the effect of Webpack bundling and the obfuscation effect of JShaman.

Webpack bundling

The configuration file for webpack bundling is called webpack.config.js, and its contents are as follows:

const path = require('path');
module.exports = {entry: './example.js',output: {path: path.resolve(__dirname, ''),filename: 'bundle.js',},
};

The entry file is example.js, and the bundled target file is bundle.js. Complete the packaging operation in the command line, as shown in the following figure.

At this point, the bundle.js file is generated, and executing it with node produces the same output as before. The contents of the bundle.js file are shown below.

It can be seen that bundle.js includes the code from both example.js and mod.js, and webpack has merged these two files into one bundle.js file.

The console.log("Tom is 100 years old.") and console.log("done.") statements are clearly visible in the code of the bundle.js file, indicating a clear functional logic.

JShaman obfuscating

If you use JShaman to obfuscate JavaScript code for example.js and mod.js files.

The Mod.js file code will become the following form.

exports['\x66\x75\x6e']=function(){var _0xc2938d="2|3|4|0|1|5|6".split("|"),_0x6c3a8e=0;while(!![]){switch(+_0xc2938d[_0x6c3a8e++]){case 0:var _0xd5b0a;continue;case 1:var _0xadb4fb=function(s,h){return s^h;}(591416,591452);continue;case 2:var _0x74a25f=function(s,h){return s+h;}(135763^135765,747847^747855);continue;case 3:var _0x="moT"['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e']("");continue;case 4:_0x74a25f=function(){return"_0xc3f35e912";}();continue;case 5:_0xd5b0a=function(){return"_0x28dbg8912";}();continue;case 6:console['\x6c\x6f\x67'](_0x+" si "['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e']("")+_0xadb4fb+".dlo sraey "['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](""));continue;}break;}};

Example.js code will become the following form.

var _0xeb79bb;var mod=require("sj.dom/."['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](""));_0xeb79bb=function(){return"_0x4f92c9912";}();mod['\x66\x75\x6e']();console['\x6c\x6f\x67'](".enod"['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](""));

The console.log("Tom is 100 years old.") and console.log("done.") statements that can be seen after webpack packaging will not appear after JShaman obfuscation.

Summary

Webpack is used to bundle files and turn multiple JS files into one, while JShaman is used to obfuscate JavaScript code and make it unreadable.

这篇关于What are the differences between Webpack and JShaman?的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/220200。

相关文章

vue-cli webpack在node环境下安装使用

vue-cli webpack在node环境下安装使用

第一步，需要下载并安装node.js以及他的npm组件； 　　第二步，用node -v;npm -v来测试node.js以及npm是否安装成功（建议用GIT命令行工具，因为GIT是linux系统），如果显示出它的版本，说明已经安装成功，如下图；  　第三步，下载vue-cli，在命令行中输入npm install -g vue-cli，自动下载vue-cli（会生成一大堆的依
阅读更多...
webpack-AST剖析

webpack-AST剖析

webpack-AST 目录 文章目录 前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装 实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码，导出全部方法`Builder`实现一个箭头函数 `exportific`前端工具使用
阅读更多...
webpack-模块热替换剖析

webpack-模块热替换剖析

webpack-模块热替换剖析 目录 文章目录 前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码 `HMR`原理步骤 前言 主要讲解热更新的原理 推荐阅读 《webpack实战 入门、进阶与调优》 前提 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升效率：工具检测到代码改动
阅读更多...
webpack处理css

webpack处理css

在神奇的babel中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍 首先介绍下style-loader和css-loader，因为处理css文件之前必须要安装这两个模块，至于这俩是从哪冒出来的，请看点击打开链接，这里详细介绍了各种loader的使用场景。 npm install css-loader style-l
阅读更多...
webpack的文件监听实现（热更新）

webpack的文件监听实现（热更新）

注意：安装之前，先保证webpack项目能正常运行！ 目录 前言1 第一种方式， --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件，保存后，会自动打包，到浏览器刷新，才能看到变化。1.4 文件监听的原理理分析 2 第二种方式，在配置 webpack.config.js 中设置 watch: true（热更新:webpack-
阅读更多...
webpack解析字体，file-loader

webpack解析字体，file-loader

注意：安装之前，先保证webpack项目能正常运行！ 因为字体和图片都不是代码文件，所以，都可以使用file-loader 1.安装 file-loader 依赖 cnpm i file-loader -D 2.在src目录下创建font文件夹，并引入字体 （这里引入AdobeGothicStd-Bold.otf.otf ） 3.配置，在 webpack.config.js 下新增配置：
阅读更多...
webpack解析css, less，scss

webpack解析css, less，scss

注意：安装之前，先保证webpack项目能正常运行！   1.安装依赖 npm install style-loader css-loader -D npm install less less-loader -D   2.配置，在 webpack.json.js 下，新增规则： module.exports = {// ...module:{rules:[// ...// 新增cs
阅读更多...
webpack解析React JSX

webpack解析React JSX

1.安装 cnpm i react react-dom @babel/preset-react -D 2.在 .babelrc 文件下，增加配置： {"presets": ["@babel/preset-env","@babel/preset-react" // 新增 react 配置]}
阅读更多...
webpack解析ES6

webpack解析ES6

注意：安装之前，先保证webpack项目能正常运行！ 1.安装 npm i @babel/core @babel/preset-env babel-loader -D   2.在src目录下，创建 .bebalrc 文件，并配置： {"presets": ["@babel/preset-env"]} 3.修改 webpack.config.js 配置： module.exports
阅读更多...
webpack对样式的处理

webpack对样式的处理

webpack对样式的处理   原文地址：https://github.com/zhengweikeng/blog/issues/9 我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。 一般来说需要引入css-loader和style-loader，其中css-load
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2