webpack 源码解析（webpack source map）

基本介绍

Webpack是一个开源的前端代码打包工具，它可以将多个JavaScript、CSS、图片等静态资源文件打包成一个或多个静态资源文件并通过模块化管理打包后的代码以提高前端应用程序的性能和加载速度，Webpack支持CommonJS、AMD、ES6等多种模块化规范并且提供了强大的插件机制和开发者工具，可以帮助开发者进行代码优化、压缩、混淆、实时重载等操作

主要功能

Webpack的主要功能包括：

• 模块化规范：支持CommonJS、AMD、ES6等多种模块化规范

• 模块化管理：通过模块化管理打包后的代码以提高前端应用程序的性能和加载速度

• 打包静态资源：将多个JavaScript、CSS、图片等静态资源文件打包成一个或多个静态资源文件

• 插件机制：提供了丰富的插件机制和开发者工具，可以帮助开发者进行代码优化、压缩、混淆、实时重载等操作

工作原理

Webpack从指定的入口文件开始递归地解析出所有的依赖模块并通过加载器对模块进行处理，使用插件进行各种代码优化和资源压缩等操作，最终将所有模块打包成一个或多个静态资源文件并将它们输出到指定的目录中，大致流程可以划分为以下几个阶段：

• 读取配置：Webpack读取指定配置文件，根据配置文件中的选项进行打包操作

• 解析模块：Webpack会解析入口文件及其依赖的模块，通过构建模块之间的依赖关系形成一个依赖图谱

• 加载器类：Webpack支持使用加载器对模块进行预处理，例如:将ES6转换为ES5、将Sass转换为CSS等

• 插件处理：Webpack提供了丰富的插件机制可以用来完成各种代码的优化、资源压缩、代码分离等操作

• 输出文件：Webpack会将所有模块打包成一个或多个静态资源文件并将它们输出到指定的目录中

核心组件

Webpack的架构可以分为以下几个核心组件：

下面是一个简单的Webpack配置文件示例，包括了常用的配置项

const path = require(\\\'path\\\');const HtmlWebpackPlugin = require(\\\'html-webpack-plugin\\\');
module.exports = {  entry: \\\'./src/index.js\\\', // 入口文件  output: {    path: path.resolve(__dirname, \\\'dist\\\'), // 输出路径    filename: \\\'bundle.js\\\' // 输出文件名  },  module: {    rules: [      {        test: /\\\\.js$/, // 匹配文件规则        exclude: /node_modules/, // 排除的文件路径        use: {          loader: \\\'babel-loader\\\', // 使用的加载器          options: {            presets: [\\\'@babel/preset-env\\\'] // 预设选项          }        }      },      {        test: /\\\\.css$/, // 匹配文件规则        use: [\\\'style-loader\\\', \\\'css-loader\\\'] // 使用的加载器      },      {        test: /\\\\.(png|svg|jpg|jpeg|gif)$/i, // 匹配文件规则        type: \\\'asset/resource\\\' // 使用的加载器      }    ]  },  plugins: [    new HtmlWebpackPlugin({      template: \\\'./src/index.html\\\' // HTML 模板文件路径    })  ],  devServer: {    contentBase: \\\'./dist\\\' // 开发服务器根目录  }};

这个配置文件包含了以下几个配置项：

• entry：入口文件路径，指定Webpack的打包入口

• ：输出文件路径和名称，指定Webpack的打包输出文件

• ：模块处理规则，指定Webpack对不同类型的文件使用不同的加载器进行处理

• ：插件配置，指定Webpack 执行打包过程中的额外操作

• ：开发服务器配置，指定 Webpack 开发服务器的相关配置

这个配置文件示例中使用了Babel和CSS加载器，用于将ES6代码和CSS样式转换为浏览器可以识别的代码，同时还使用了HtmlWebpackPlugin插件，用于生成HTML文件并将打包后的静态资源文件注入到HTML文件中，最后使用了开发服务器配置，可以在本地开发环境中进行实时预览和调试

源码泄露

Webpack会为打包后的代码生成Source Map文件以便在运行时可以调试源代码，开发人员在生产环境中开启SourceMap功能后会导致源代码信息泄露风险，攻击者可以获得敏感信息，例如:源代码和服务器配置，同时可以通过发送HTTP请求来获取Source Map文件并从中获取敏感信息，在webpack.config.js中可以通过设置devtool选项来开启SourceMap功能，例如:使用\\”source-map\\”选项可以开启完整的SourceMap

javascript// webpack.config.jsmodule.exports = {  // ...  devtool: \\\'source-map\\\',}

我们在对网站进行测试时如果在浏览器端打开控制台–查看sources/源代码tab–查看包文件，当有webpack文件时则证明当前源码泄漏状态

源码获取

插件获取

插件安装

Step 1：下载SourceDetector插件

https://github.com/Lz1y/SourceDetector-dist

Step 2：在Google浏览器中输入\\”chrome://extensions/\\”打开插件，单击\\”加载已解压的扩展程序\\”，选择\\”SourceDetector-dist-master\\”子目录中的dist文件夹

获取步骤

Step 1：浏览网站时使用快捷键\\”Ctrl+Shift+i\\”查看并获取目标网站的源代码信息，在本例中可以看到webpack字样，说明使用webpack

Step 2：选中\\”webpack\\”文件夹并单击搜索，输入\\”js.map\\”即可获取代码中包含的js.map信息

Step 3：单击刚才安装的Google插件\\”SourceDetector\\”，单击\\”Download All\\”即可下载存在webpack代码泄露的源代码

Step 4：解压压缩包即可获取所有泄露的源代码

工具获取

工具安装

Step 1：安装npm

sudo apt-get install npm

Step 2：安装reverse-sourcemap

npm install --global reverse-sourcemap

Step 3：查看工具使用说明

reverse-sourcemap -h

获取步骤

Step 1：浏览网站时使用快捷键\\”Ctrl+Shift+i\\”查看并获取目标网站的源代码信息，在本例中可以看到webpack字样，说明使用webpack

Step 2：选中\\”webpack\\”文件夹并单击搜索，输入\\”js.map\\”即可获取代码中包含的js.map信息

Step 3：在新的窗口中直接访问上面的.js文件并在其后添加map后缀，随后下载文件到本地

Step 4：使用工具反编译获取源代码文件

#执行示例reverse-sourcemap  -v  *.map  -o  soucecode

Step 5：随后即可查看源代码

修复方案

修改vue.config.js配置

modeule.exports = {  productionSourceMap:false}

增加vue.config.js配置

#方式1modeule.exports = {  configureWebpack: config => {     config.devtool = false;     ...  },}
#方式2modeule.exports = {  configureWebpack: {     devtool：false;     ...  },}

参考链接

https://www.webpackjs.com/concepts/

https://www.cnblogs.com/liemei/p/7826202.html