当前位置：首页 > ds >正文

第三十九天(WebPack构建打包Mode映射DevTool源码泄漏识别还原)

ds 2025/8/18 19:08:03

webpack作用

运行效率高，不打包时无法执行调用js文件中再调用的js

打包器配置文件，入口文件要加./ 进到配置文件目录下输入 npx webpack

安全方面：

Webpack 是一个强大的模块打包工具，它主要用于将 JavaScript 代码和其他资源（如 CSS、图片、字体等）打包成浏览器能够高效加载的文件。下面是使用 Webpack 的一些常见原因和优势：

模块化支持

Webpack支持模块化开发，可以将代码分割成多个文件（模块），然后将这些文件按需打包成一个或多个最终的输出文件。这对于管理复杂应用程序的代码非常重要，特别是现代JavaScript应用程序中，大多数代码和资源都已是模块化的。

例如，你可以将前端代码分为多个模块（如组件、工具函数等），然后让 Webpack 负责打包这些模块，并管理它们之间的依赖关系。

处理各种资源

Webpack 不仅仅是处理 JavaScript 文件，还能处理多种类型的资源：

CSS：你可以使用 Webpack 将 CSS 文件打包到最终的输出中。

Sass / Less：Webpack 配合相应的加载器（如 sass-loader、less-loader）可以处理 Sass 或 Less 文件。

图片和字体：通过 file-loader 或 url-loader，Webpack 可以处理图片、字体文件等静态资源。

HTML 文件：可以使用 html-webpack-plugin 插件自动生成 HTML 文件并插入打包后的资源。

代码分割（Code Splitting）

Webpack 支持代码分割，它可以将大型的 JavaScript 应用程序拆分成多个小的文件（chunks），并按需加载这些文件。这样，初次加载时，浏览器只会加载最小的必需代码，而不是所有的代码，从而提高页面加载速度。

例如，你可以按页面或功能进行代码分割，只加载用户需要的部分，而不是一次性加载整个应用程序。

性能优化

Webpack 提供了多种方式来优化性能：

压缩和优化：在生产模式下，Webpack会自动压缩JavaScript和CSS文件，减小文件大小，从而加速加载速度。

Tree Shaking：Webpack 能够识别并删除未使用的代码，这样在最终打包时只会包含必要的代码，减少最终打包文件的体积。

缓存优化：通过配置 hash 和 chunkhash，Webpack 可以为输出的文件生成唯一的哈希值，这有助于缓存优化。这样，浏览器可以缓存大部分静态资源，而只有在资源内容更改时才会重新下载。

热模块替换（HMR）

Webpack 提供了热模块替换（HMR）功能，允许开发者在不刷新浏览器页面的情况下更新应用程序的部分模块。这对于开发时快速预览修改、提高开发效率非常有用。

兼容性和 Polyfill

Webpack 可以与 Babel 配合使用，将现代 JavaScript 转译成兼容旧浏览器的代码。通过 Babel 和 Webpack 配合，你可以确保代码在不同浏览器中的兼容性。

自动化任务

Webpack 配置可以结合其他工具自动化一些常见的任务：

自动生成 HTML 文件，并将打包的 JS 和 CSS 插入其中。

自动处理样式表（Sass、Less）。

自动优化图片文件。

自动生成文件哈希和版本控制。

插件系统

Webpack 提供了强大的插件机制。你可以通过使用插件（如 HtmlWebpackPlugin、CleanWebpackPlugin、MiniCssExtractPlugin 等）来扩展 Webpack 的功能，定制化自己的构建流程。

支持不同的开发环境

Webpack 可以根据不同的环境（开发、生产）使用不同的配置。你可以使用 mode 配置来选择开发模式或生产模式，Webpack 会根据模式做出相应的优化。例如，在生产模式下，它会自动启用代码压缩和优化功能。

生态系统和社区支持

Webpack 拥有非常活跃的社区，很多流行的前端框架（如 React、Vue）和库都提供了针对 Webpack 的最佳实践和插件，使得集成变得更加简便。

结论：

Webpack 是现代前端开发中不可或缺的工具，特别是对于构建复杂的、模块化的应用程序。它的优势在于模块化处理、资源管理、性能优化、代码分割和插件扩展，使得构建和部署变得更加高效和灵活。如果你的应用程序规模较大，或者涉及到多个资源文件，使用Webpack打包将带来显著的性能和开发体验提升。

未使用web Pack 时

sum.js 写了一个加法函数，count.js 写了一个减法函数 main.js 继承他们两个，然后调用方法，传值进去计算，然后将值答应出来， web.html 引用main.js ，然后在浏览器中访问html文件，查看是否能输出main.js 中的内容

count.js

export default function count(x,y){
return x-y;
}

sum.js

export default function sum(x,y){
return x+y;
}

main.js

import count from './count';
import sum from './sum';

console.log(count(2,1));
console.log(sum(1,2));

web.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>

访问时会报错，因为没有调用其他两个js ，但是如果每次都要将其他的js一起引用的话，会很麻烦，所以打包器就出现了，它会先将其他的js文件打包到一起，然后生成一个新的js文件，这时候引用这个js文件时就能实现功能了

#WebPack技术：

1、打包模式差异开发和生产

2、打包代码差异

3、打包文件差异

参考：

印记中文 - 深入挖掘国外前端新领域，为国内 Web 前端开发人员提供优质文档！

webpack | webpack中文文档 | webpack中文网

一文看懂webpack打包操作

npm i webpack --dev

npm i webpack-cli --dev

例子：打包JS，NodeJS，HTML等

配置型文件打包：

先创建一个webpack.config.js 文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'development', // 开发环境模式
    entry: './main.js', // 入口文件 注意： ./是必带的 不带会报错

    output: {
        filename: 'bundle.js', //输出文件名
        path: path.resolve(__dirname, 'dist'),   //输出目录的绝对路径
    }
}

在终端中输入 npx webpack ，这样便打包好了，同一级中便会生成一个dist目录，目录下面放了一个bundle.js 文件这个就是刚刚打包好的文件了

然后在html中引入这个文件就能将值打印出来了

加载的bundle.js 文件是这样的

这里在源代码中的webpack:// 下面就有刚才的三个js文件

上面是用开发环境模式，下面用生产环境模式打包看看有什么区别

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production', // 生产环境模式
    entry: './main.js', // 入口文件 注意： ./是必带的

    output: {
        filename: 'bun1.js', //输出文件名
        path: path.resolve(__dirname, 'dist'),   //输出目录的绝对路径
    }
}

终端中输入 npx webpack

html中引用打包好的js文件

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/bun1.js"></script>
</body>
</html>

源代码中就没有了webpack:// ，而加载的js文件也变成了短短一句，这是因为开发时能看到的更多，当要上线时就要改成生产模式

当上线时还是用的开发模式打包的会就会造成js源码泄露

node.js打包就不能用上面一样的方式打包了，不然会报错

将上一章的fil.js 打包

const path = require('path');
const nodExternals = require('webpack-node-externals');

module.exports = {
    entry: './file.js', // 入口文件 注意： ./是必带的
    output: {
        filename: 'bun2.js', //输出文件名
        path: path.resolve(__dirname, 'dist'),   //输出目录的绝对路径
    },
    target: 'node',
    externals:[nodExternals()],
    mode: 'production', // 生产环境模式
};

将打包好的js文件运行

可以正常访问

源代码中什么js文件都没有一般node.js 是不需要打包的，毕竟没打包之前也看不到加载的js文件

简单来说，webpack具备以下功能：

1、支持js模块化

2、处理css兼容性

3、将多个html/css/js文件压缩合并

#源码泄漏：

1、mode配置

production（生产），development（开发），开发模式下会存在泄漏

还原：浏览器webpack://

2、devtool配置

参考：开发安全典型漏洞之webpack源码泄露及防护

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

配置文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production', // 生产环境模式
    entry: './main.js', // 入口文件 注意： ./是必带的

    output: {
        filename: 'app-map.js', //输出文件名
        path: path.resolve(__dirname, 'dist'),   //输出目录的绝对路径
    },
    //直接配置 devtool ,避免使用configureWebpack
devtool: 'source-map',
};