webpack 混淆压缩 javascript 后端代码
来源:互联网 发布:网络交通扣分处理 编辑:程序博客网 时间:2024/05/09 19:46
需求背景
JavaScript 是脚本语言, 没有编译过程, 直接以源码就可以运行. 有的时候, 出于安全或者其他的原因, 我们不希望别人直接读到源码, 或者很容易对源码做出修改使用. 这个时候, 就需要对源码进行混淆压缩处理. 经过处理后的代码体积变小, 不再可读. 本篇介绍利用 webpack 打包工具来完成对后端代码的混淆压缩.
安装配置 webpack
- 安装
npm i babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-stage-2 webpack -D
- 配置
const webpack = require('webpack');const path = require('path');function resolve(dir) { return path.resolve(__dirname, dir);}module.exports = { entry: { app: ['babel-polyfill', './app.js'], }, target: 'node', output: { path: __dirname, filename: '[name].min.js' }, resolve: { modules: [".", "node_modules"], extensions: ['.js'], alias: { "cfg": resolve("cfg.js") } }, externals: function () { let manifest = require('./package.json'); let dependencies = manifest.dependencies; let externals = {}; for (let p in dependencies) { externals[p] = 'commonjs ' + p; } externals["cfg"] = "commonjs cfg"; return externals; }(), node: { console: true, global: true, process: true, Buffer: true, __filename: true, __dirname: true, setImmediate: true }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] }};if (process.env.NODE_ENV === 'production') { module.exports.plugins = (module.exports.plugins || []).concat([new webpack.optimize.UglifyJsPlugin({ minimize: true, compress: false })]);}
- 配置说明
上面的 webpack 配置将会把 app.js 和它的依赖源码混淆压缩到一个文件app.min.js当中.
通过 externals
属性告诉 webpack 在打包的时候不要打包 node_modules 目录下面的代码, 也不要将程序的配置文件 cfg.js 一起打包, 因为 node_modules 目录可以根据 package.json 安装生成, 而 cfg.js 是留给用户自定义配置用的, 如果一起打包到 app.min.js 就不方便编辑了, 所以这两项都排除了.
但是这里排除打包 cfg.js 有个问题需要解决. 我们只指定了对 cfg
字样的模块进行排除, 也就是说, 在源码里面, 凡是要引用 cfg.js 的地方, 我们都不能按照相对路径来写, 比如 require(‘./cfg.js’), 如果这样写, 那么 cfg.js 还是会打包到最终的文件里在. 正确的写法是 require(‘cfg’). 这就要求把 NODE_PATH 指向当前源码的根目录.
为了方便指定 NODE_PATH, 我们可以安装 cross-env 组件
npm i cross-env -D
接下来, 如果你之前以 node app.js
这种方式运行程序, 那么现在改为这样 cross-env NODE_PATH=. node app.js
还有一个小问题, 我这里使用 vscode, 来做 JS 开发 IDE, 当以相对路径引用库文件的时候, vscode 能够提供很好的编码提示. 但是以指定 NODE_PATH 的方式引用文件时, vscode 不能提示. 为了让 vscode 知道 NODE_PATH 所在, 我们可以在源码根目录下新建一个配置文件来解决, jsconfig.json
{ "compilerOptions": { "target": "ES6", "baseUrl": "." }}
打包
cross-env NODE_ENV=production NODE_PATH=. webpack --progress --hide-modules
- webpack 混淆压缩 javascript 后端代码
- JavaScript压缩混淆
- Gulp混淆压缩代码
- android代码压缩混淆
- 用 webpack 构建 node 后端代码
- webpack 代码压缩优化篇
- uglifyjs混淆压缩js代码
- ionic代码压缩与代码混淆
- 压缩代码和资源-ProGuard,代码混淆
- Javascript 代码混淆综合解决方案 - Javascript 在线混淆器javascript
- 使用Jasob混淆javascript代码
- python反混淆javascript代码
- 用UglifyJS2合并压缩混淆JS代码
- 用UglifyJS2合并压缩混淆JS代码
- node.js 压缩混淆js代码
- JS代码压缩混淆工具使用说明
- JS代码压缩混淆工具使用说明
- 用UglifyJS2合并压缩混淆JS代码
- 分治·减治·变治
- 作业调度与进程调度
- 加速计陀螺仪信息采集
- JAVA图书馆管理系统各个项目链接
- 【Flink系列2】时间窗口
- webpack 混淆压缩 javascript 后端代码
- 用JS制作一个信息管理平台
- PAT (Basic Level) Practise (中文) 1052. 卖个萌 (20)
- 关于getRawX和getX、getMeasureWidth和getWidth之间的区别
- 京东2018秋招编程题
- 《UNIX网络编程 卷2》 笔记: 记录上锁
- requests禁止重定向
- UVa 11307
- Using a std::unordered_set of std::unique_ptr