问题

有一个 Vue2 的组件项目，在webpack中使用 javascript-obfuscator 对打包文件进行加密输出；另一个项目，需要依赖该组件，引入加密后的打包输出文件，直接报错 Uncaught Error: Cannot find module "."。而引入没有经过加密的打包输出文件，则可以正常使用。

版本信息：

webpack：4.14.0,
webpack-obfuscator: 2.6.0,
javascript-obfuscator: 3.2.7,

原因

javascript-obfuscator 的配置不正确，在3.0.0的版本更新中配置项 ignoreRequireImports 更名为了 ignoreImports；但是在 javascript-obfuscator 的 README 说明文档里面，写的仍然是 ignoreRequireImports

github上的问题链接：https://github.com/javascript-obfuscator/javascript-obfuscator/issues/1085

解决

方案1（推荐）：
开启ignoreImports配置项

// webpack的配置文件内
const JavaScriptObfuscator = require('webpack-obfuscator');module.exports = {...plugins: [new JavaScriptObfuscator({controlFlowFlattening: false,deadCodeInjection: false,ignoreImports: true, // 这里设置为truestringArrayThreshold: 0.3,},[]),],
}

方案2：
另外单独使用 javascript-obfuscator 对webpack打包输出的文件进行加密，而不是使用webpack插件的方式进行。通过在打包输出文件的导出语句前插入 /* javascript-obfuscator:disable */ 来禁用导出语句的加密混淆，代替使用ignoreImports配置项。
ps：这是在不清楚配置项改名了的时候，使用的解决方案，放在这里记录一下

const fs = require('fs');
const exec = require('child-process-promise').exec;// 主要加密函数，传入打包后需要加密的文件路径
function codeObfuscate(filePath) {// 读文件fs.readFile(filePath, 'utf8', function (err, data) {if (err) throw err;const reg = /[a-z](?=.exports=require)/g;// 解决直接混淆后报错：Uncaught Error: Cannot find module "."let content = data.replace(reg, '/* javascript-obfuscator:disable */ $&');const reg2 = /(?<="use strict";)/g;// 解决部分引用不混淆content = content.replace(reg2, '$& /* javascript-obfuscator:enable */ ');// 写文件fs.writeFile(filePath, content, 'utf8', (err) => {if (err) throw err;// 进行混淆const obfuscatePromise = exec(`javascript-obfuscator ${filePath} --output ${filePath}`).then(() => {console.log("obfuscate success");}).catch((error) => {console.error('obfuscate failure', error);});});});
}