WEBPACK打包器的使用打包器的安全问题（源码泄露）还原

news/2025/2/27 5:57:53

前言

webpack是一个可以把多个前端页面进行打包的工具他其实也是node js的延伸可以进行打包node.js文件

基本使用

1、一键命令打包

创建一个 app目录下设 index.html runboot.js

我们练习对Runboot.js进行打包

一键打包命令 npx webpack app/runboots -o log/bndle.js --development

第一个参数是要进行打包的js程序    
第二个是 打包的地址是那个目录下的

--   是  mode  模式  有两种  1、生产者模式（发布的版本  能看到的信息少）
2、开发者模式 （development ）   看到的信息多

运行一下

打包的文件我们发现你妹的好像使用了代码的混淆不是那个清晰了一定程度上保护了源码

但是我们执行发现打包器打包的 bundle 和原 js的功能是一样的只不过是样子变了

2、使用配置文件进行打包一个这个比较常用

新建一个 webpack.config.js

var path = require('path'); //引入path模块  
var webpack = require('webpack');

module.exports = {
    mode: 'development', //开发模式
    entry: './runboot.js', //入口文件  路径 ./ 不能少 这个是要进行打包的文件
    output: {
        filename: 'app.js', //输出文件
        path: path.resolve(__dirname, 'output') //输出路径
    },

}

终端直接运行 apx webpack 会自动执行这个打包

运行结果：

找到打包后文件运行

3、打包node.js 编写的程序

var path = require('path'); //引入path模块  
var webpack = require('webpack');


module.exports = {
    mode: 'development', //开发模式
    entry: './rce.js', //入口文件  路径 ./ 不能少 这个是要进行打包的文件
    output: {
        filename: 'app.js', //输出文件
        path: path.resolve(__dirname, 'output') //输出路径
    },
    target: 'node', //打包的目标环境为node
    externals: [webpack()], //排除node_modules中的模块

}

rce.js

源码泄露

1、模式使用错误导致的源码泄露原来是要使用生产模式的但是使用了开发模式

在index.html中导入这个

因为这个app.js 是develop模式的所以我们直接查看

2、devtool 配置错误导致的源码泄露

什么是dev配置 devtool 是一个追错调试的配置但是配置不当在使用webpack打包部署代码时，如果参数devtool配置不当，将会在部署代码文件中生成对应匹配的soucemap文件（源码映射），如果将参数devtool配置为“source-map”、“cheap-source-map”、“hidden-source-map”、“nosources-source-map”、“cheap-module-source-map”等值时，打包后将生成单独的map文件。