Webpack看这篇就够了

于 2024-07-16 15:56:43 发布
阅读量439 收藏 9
点赞数 22
文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74948742/article/details/140447860
版权

    💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。



非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本文将详细地讲解webpack的基础入门知识，如果对大家有帮助，请一键三连哦!

目录

1.Webpack

2.Webpack 修改入口和出口

3. Webpack 自动生成 html 文件

4.Webpack-打包 css 代码

5. 优化-提取 css 代码

6. 优化压缩过程

7. Webpack-打包 less 代码

8. Webpack-打包 less 代码

9. Webpack-打包图片

10.Webpack 搭建开发环境

11. Webpack 打包模式

12.Webpack 打包模式的应用

13.Webpack 前端注入环境变量

14.Webpack 开发环境调错 source map

15.Webpack 设置解析别名路径

16.Webpack 多页面打包

1.Webpack

1.Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

2.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

3.打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

4.Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

步骤：

1.新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

npm init -y

2.新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

src/utils/check.js

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

src/index.js

/**
 * 目标1：体验 webpack 打包过程
 */
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果（npm run 自定义命令）

3.下载 webpack webpack-cli 到项目（版本独立）

npm i webpack webpack-cli --save-dev

注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

4.项目中运行工具命令，采用自定义命令的方式（局部命令）

npm run build

npm run 自定义命令名字

注意：实际上在终端运行的是 build 右侧的具体命名

5.自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

2.Webpack 修改入口和出口

  1. Webpack 配置：影响 Webpack 打包过程

  2. 步骤：

  1. 项目根目录，新建 Webpack.config.js 配置文件

  2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src/login/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
  }
}

      3.重新打包观察

3. Webpack 自动生成 html 文件

1.插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源

2.步骤：

1.下载 html-webpack-plugin 本地软件包到项目中

npm i html-webpack-plugin --save-dev

2.配置 webpack.config.js 让 Webpack 拥有插件功能

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板文件
      filename: './login/index.html' // 输出文件
    })
  ]
}

  1. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

  2. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

4.Webpack-打包 css 代码

  1. 注意：Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

  2. 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

/**
 * 目标5：打包 css 代码
 *  5.1 准备 css 代码，并引入到 js 中
 *  5.2 下载 css-loader 和 style-loader 本地软件包
 *  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能
 *  5.4 打包后观察效果
 */
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

注意：这里只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

配置 webpack.config.js 让 Webpack 拥有该加载器功能

// ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
};

打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

5. 优化-提取 css 代码

  1. 需求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中

  2. 需要：mini-css-extract-plugin 插件来实现

  3. 步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i --save-dev mini-css-extract-plugin

配置 webpack.config.js 让 Webpack 拥有该插件功能

// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin()
  ]
};

  1. 打包后观察效果

  2. 注意：不能和 style-loader 一起使用

  3. 好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

6. 优化压缩过程

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

    // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js 让 Webpack 拥有该插件功能

// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

打包后观察 css 文件内自己代码是否被压缩了

7. Webpack-打包 less 代码

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i css-minimizer-webpack-plugin --save-dev

配置 webpack.config.js 让 Webpack 拥有该插件功能

// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

8. Webpack-打包 less 代码

  1. 加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

  2. 步骤：

新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

html {
  body {
    background: url('./assets/login-bg.png') no-repeat center/cover;
  }
}

less 样式引入到 src/login/index.js 中

/**
 * 目标8：打包 less 代码
 *  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
 *  8.2 下载 less 和 less-loader 本地软件包
 *  8.3 配置 webpack.config.js 让 Webpack 拥有功能
 *  8.4 打包后观察效果
 */
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

配置 webpack.config.js 让 Webpack 拥有功能

// ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
}

9. Webpack-打包图片

  1. 资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

  2. 步骤：

  1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

    占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

    占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

    占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

  2. 注意：判断临界值默认为 8KB

    大于 8KB 文件：发送一个单独的文件并导出 URL 地址

    小于 8KB 文件：导出一个 data URI（base64字符串）

  3. 在 src/login/index.js 中给 img 标签添加 logo 图片

/**
 * 目标9：打包资源模块（图片处理）
 *  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
 *  9.2 打包后观察效果和区别
 */
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

配置 webpack.config.js 让 Webpack 拥有打包图片功能

// ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

10.Webpack 搭建开发环境

  1. 每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器

  2. 作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

  3. 步骤:

下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

配置自定义命令，并设置打包的模式为开发模式

// ...

module.exports = {
  // ...
  mode: 'development'
}
"scripts": {
  // ...
  "dev": "webpack serve --mode=development"
},

使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

在 js / css 文件中修改代码保存后，会实时反馈到浏览器

11. Webpack 打包模式

  1. 打包模式：告知 Webpack 使用相应模式的内置优化

  2. 分类：

模式名称模式名字特点场景
开发模式development调试代码，实时加载，模块热替换等本地开发
开发模式production压缩代码，资源优化，更轻量等打包上线

如何设置影响 Webpack呢？

方式1：在 webpack.config.js 配置文件设置 mode 选项

// ...

module.exports = {
  // ...
  mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数

"scripts": {
  "build": "webpack --mode=production",
  "dev": "webpack serve --mode=development"
},

  1. 注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

  2. 体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容

12.Webpack 打包模式的应用

  1. 需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

  2. 方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

    方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

    方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

  3. 主要使用方案 2 尝试，其他方案可以结合点击跳转的官方文档查看尝试

  4. 步骤：

下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

在 webpack.config.js 区分不同环境使用不同配置

module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      }
    ],
  },

重新打包观察两种配置区别

13.Webpack 前端注入环境变量

  1. 需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

  2. 问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

  3. 解决：使用 Webpack 内置的 DefinePlugin 插件

  4. 作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

  5. 配置 webpack.config.js 中给前端注入环境变量

// ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

14.Webpack 开发环境调错 source map

  1. source map：可以准确追踪 error 和 warning 在原始代码的位置

  2. 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

  3. 设置：webpack.config.js 配置 devtool 选项

// ...

module.exports = {
  // ...
  devtool: 'inline-source-map'
}

  1. inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

  2. 注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

15.Webpack 设置解析别名路径

  1. 解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单

  2. 例如：

原来路径如下：

import { checkPhone, checkCode } from '../src/utils/check.js'

配置解析别名：在 webpack.config.js 中设置

// ...

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

这样我们以后，引入目标模块写的路径就更简单了

import { checkPhone, checkCode } from '@/utils/check.js'

修改代码的路径后，重新打包观察效果是否正常！

16.Webpack 多页面打包

  1. 概念：单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到

    多页面：多个 html 文件，切换页面实现不同业务逻辑展示

  1. 需求：把黑马头条-数据管理平台-内容页面一起引入打包使用

  2. 步骤：

    1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出

    2. 下载 form-serialize 包并导入到核心代码中使用

    3. 配置 webpack.config.js 多入口和多页面的设置

      // ...
const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

总结：

1.本文讲了什么是webpack

2.webpack的使用

3.webpack关于打包的相关知识

4.webpack关于环境的配置

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

大学生小郑
关注
  • 22
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Weex入门这一篇就够了
01-27
（1）安装nodejs （2）安装webpack:npminstallwebpack-g （3）安装vue-cli脚手架：npminstallvue-cli-g （1）vueinitwebpackvue-hello(vue-hello为项目名称) （2）cdvue
详解webpack进阶之loader篇
01-21
webpack的loaders是一大特色，也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder 一、loaders之 预处理 css-loader 处理css中路径引用等问题 style-loader 动态把样式写入css sass-loader scss编译器 ...
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
入门 Webpack，看这篇就够了
忘川
12-29 207
转自 2018年8月25日更新，目前 webpack 已经更新值 4.17.1 ，本文所用到的各种库或多或少有些过时，跟着代码操作下来可能会遇到各种问题，不过 webpack 的主体思想没变，所以还是希望本文对新学 webpack 的你，有所帮助。此外用基于 webpack 4.17.1写了一个简单的demo，如果遇到啥问题，可以参考，之后应该会逐步来完善这个demo，如果有啥通用的想实现的...
入门Webpack，看这篇就够了
weixin_42600182的博客
10-17 110
写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进...
学习webpack,看这一篇就够了
li5466667的博客
05-03 3437
1.webpack基本介绍 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩合并 2.学习webpack的准备
入门Webpack，看这篇就够了)
qq_20777797的博客
03-28 520
参见：http://www.jianshu.com/p/42e11515c10f 需要注意的是： 1.  npm install -g webpack              //全局安装 2. npm init            //创建package.json 3.建立webpack.config.js 4.因为是全局安装，所以打包文件只需在终端运行 webpack 命
入门 webpack，看这篇就够了
qq_24520459的博客
05-27 490
目前为止，webpack 在 GitHub上已拥有48.8k 的 star，在前端代码打包器领域内，算得上是时下最流行的前端打包工具。它可以分析各个模块的依赖关系，最终...
webpack超详细教程，学webpack看这一篇就够了！（上）
码喽的自我修养
05-02 3334
​本文将以基础到进阶的形式详细讲解webpack，包括【webpack基本概念和作用】【使用步骤】【打包、编译和压缩等相关配置】【使用webpack开发服务器】等等，由浅入深，通俗易懂，需要的小伙伴点个关注收藏一下吧！
详解webpack进阶之插件篇
08-30
除了这两个插件，Webpack 插件体系还包括许多其他功能强大的工具，如 `clean-webpack-plugin` 用于清理输出目录，`copy-webpack-plugin` 用于复制静态资源，`uglifyjs-webpack-plugin` 进行代码压缩，以及 `webpack-...
使用webpack 4打包项目—进阶篇之loader
01-08
使用webpack 4打包项目—进阶...这篇文章主要讲一下webpack中一些包的用法。 1. html-webpack-plugin 这个包可以使我们，自动在内存中根据指定页面生成内存的页面，然后在页面上加载的时候显示内存后脏的页面。 并且它
浅谈PostCSS
三翼鸟数字化平台的技术实践分享
07-12 1097
PostCSS使用说明
React 18 + Babel 7 + Webpack 5 开发环境搭建
wwwmewww的专栏
07-11 698
【代码】React 18 + Babel 7 + Webpack 5 开发环境搭建。
前端工程化：Webpack配置全攻略
zhaodash97的博客
07-11 871
简单来说，Webpack 就是一个现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时，它会在内部构建一个依赖图，映射项目所需的每个模块，并生成一个或多个 bundle。听起来很高大上？其实就是把你那一堆乱七八糟的代码文件整理打包，变成浏览器能够理解和运行的文件。就像是一个超级勤劳的保洁阿姨，把你屋里的衣服、书本、玩具都收拾得井井有条。好了，经过这一番折腾，你应该对 Webpack 的配置有了一个全面的认识。
Webpack配置及工作流程
m0_54007573的博客
07-10 1075
Webpack配置及工作流程
vue 环境变量那些事
weixin_42028153的博客
07-10 374
env.production 代表的生产环境变量也就是上线以后使用的。.env.development 代表的开发环境变量。取：import.meta.env.VITE_变量名。取：process.env.VUE_APP_变量名。总则：使用 .env.环境名字文件去定义，运行命令的时候指定环境。vite+vue3项目（默认VITE开头，其他开头的需要配置）存：VUE_APP_变量名 = xxx。比如：.env 代表所有环境变量使用的一些变量。vue-cli项目（webpack+vue2）
Webpack打包生产环境进行优化处理
渔舟小调的博客
07-11 610
uglifyOptions中设置了压缩选项，包括不显示警告、压缩时移除debugger语句和console.*函数（如console.log），以及移除对console.log的直接引用。test属性定义哪些类型的文件需要被压缩，这里包括.js、.css、.json、.ico、.svg、.xml和.html文件。test: /\.(js|css|json|ico|svg|xml|html)$/, // 匹配文件格式。drop_console: true, // 移除console.*函数。
js逆向-webpack-python
Sdwq12的博客
07-12 414
-发现不同执行方式会有不同得生成n得值也就是 e（直接将代码copy进本地）--t.header.user 是动态变得，获取时通过响应头获取，在传参。--我们需要找到其加载器，都知道本地，使用加载器调用函数。-- e 为 key 并且是随机变换得（但只有两个值）10、需要将另一个其参数的映射文件复制本地。-- 分析发现ee是一个webpack。--发现一部分是一个标准的加载器写法。--en函数错误，在将en导入本地。--然后把加载器赋值给全局变量。--有参数说明是单文件传入。--搜索参数找到其位置。
React学习笔记03-----手动创建和运行
最新发布
m0_67357141的博客
07-15 85
是首页的模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值