用JShaman本地部署版,加密2.7MB的Webpack生成的JS文件

本文介绍了如何使用JShaman平台对JavaScript代码进行混淆加密,包括启动本地部署版,上传JS文件,选择默认配置并执行混淆过程。尽管代码由webpack等工具打包,可能增加混淆时间,但最终成功将2.7MB的代码加密为6.3MB。

JShaman是知名的JS代码保护平台。在线使用,一键混淆加密,无需注册、无需登录。可免费用,也有商业服务;有在线使用的SAAS平台网站,也有本地部署版。很方便、很强大,很专业。

今天,测试使用JShaman的本地部署版。

第一步:启动JShaman本地部署版

注意:http端口是800,https端口是4430。

第二步:在浏览器中打开JShaman

第三步:上传JS文件

文件大小2.7MB,代码内容如下图,由图可见,这不是手工编写的代码,应该是由webpack之类的工具打包生成的,虽然这种代码对于混淆加密不友好,但它也是标准JS代码,也是可以混淆加密的,只是消耗的时间可能会比一般代码久些。

使用默认配置选项,不做修改:

第四步:开始混淆加密

JShaman后台开始工作,等待中。

第五步,混淆加密成功

经过大约3分钟等待,提交的JS代码混淆加密完成,如下图:

加密后的代码变为6.3MB,如下图:

那么,这个2.7MB的JS代码就加密完成了。

### Vue 2.7Webpack 的配置文件位置 在 Vue 2.7 项目中,Webpack 配置的位置取决于项目的构建工具和初始化方式。以下是几种常见情况的详细说明: #### 1. 使用 `vue-cli` 创建的项目 如果项目是通过 `vue-cli` 创建的,默认情况下 Webpack 配置会被隐藏并封装在 `@vue/cli-service` 中[^3]。用户可以通过以下两种方式访问或扩展 Webpack 配置: - **`vue.config.js` 文件** 在项目根目录下创建或编辑 `vue.config.js` 文件,使用 `configureWebpack` 或 `chainWebpack` 方法来修改 Webpack 配置。例如: ```javascript module.exports = { configureWebpack: { module: { rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } ] } } }; ``` 这种方式适用于需要对 Webpack 配置进行少量修改的情况。 - **自定义 Webpack 配置文件** 如果需要完全控制 Webpack 配置,可以通过 `vue inspect` 命令生成完整的 Webpack 配置文件,并将其保存为 `webpack.config.js`。生成命令如下: ```bash vue inspect > webpack.config.js ``` #### 2. 手动搭建的 Vue 项目 对于手动搭建的 Vue 项目,Webpack 配置文件通常位于项目根目录下的 `webpack.config.js` 文件中[^2]。该文件直接定义了 Webpack 的入口、出口、加载器和插件等配置项。例如: ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` #### 3. 升级到 Webpack 5 的项目 如果项目从 Webpack 4 升级到 Webpack 5,可能会引入新的配置选项,例如文件缓存和线程池优化[^4]。升级后的 Webpack 配置可能包含以下内容: ```javascript const path = require('path'); const { VueLoaderPlugin } = require('vue-loader'); module.exports = { cache: { type: 'filesystem', buildDependencies: { config: [__filename] }, allowCollectingMemory: true, maxMemoryGenerations: 1 }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, use: [ 'thread-loader', { loader: 'babel-loader', options: { cacheDirectory: true } } ] } ] }, plugins: [ new VueLoaderPlugin() ] }; ``` ### 注意事项 - 如果项目使用了 `vue-cli`,建议优先通过 `vue.config.js` 修改配置,而不是直接覆盖默认的 Webpack 配置。 - 对于手动搭建的项目,确保安装了所有必要的依赖项,例如 `vue-loader` 和 `sass-loader`[^2]。 --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值