Webpack和JShaman相比有什么不同？

Webpack和JShaman相比有什么不同？

Webpack的功能是打包，可以將多個JS文件打包成一個JS文件。

JShaman專門用于對JS代碼混淆加密，目的是讓JavaScript代碼變的不可讀、混淆功能邏輯、加密代碼中的隱秘數(shù)據(jù)或字符，是用于代碼保護的。

兩者是完全不同的。但是，因為Webpack打包生成的JS文件，看起來似乎也有一些混淆特征，因此常被一些人誤以為它也是混淆工具，事實上，它當然不是。

下面用實例演示兩者差別：

本例中，使用兩個文件，example.js和mod.js。

Example.js文件代碼

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

Mod.js文件代碼

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

代碼邏輯非常簡單，example.js調(diào)用mod.js中的函數(shù)，運行時會輸出兩行信息，如下圖所示。

接下來，演示W(wǎng)ebpack打包效果和JShaman混淆效果。

Webpack打包

用于webpack打包的配置文件，webpack.config.js文件內(nèi)容如下。

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

入口文件是example.js，打包目標文件是bundle.js。在命令行中完成打包操作，如下圖所示。

此時生成了bundle.js文件，用node執(zhí)行也與之前運行輸出相同，bundle.js文件內(nèi)容如下圖所示。

可以看出bundle.js中包含了之前example.js和mod.js中的代碼，webpack是將這兩文件合并成了一個bundle.js文件。

bundle.js文件代碼中能明顯的看到console.log("Tom is 100 years old.")和console.log("done.")語句，功能邏輯清晰。

JShaman混淆

如果使用JShaman對example.js和mod.js文件代進行JavaScript代碼混淆。

Mod.js文件代碼會變成如下形式。

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代碼會變成如下形式。

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'](""));

webpack打包后能看到的console.log("Tom is 100 years old.")和console.log("done.")語句，JShaman混淆后不會出現(xiàn)的。

總結(jié)

Webpack用于打包文件，將多個JS文件變成一個。

JShaman用于混淆JavaScript代碼，使代碼不可讀。