11-Webpack模块打包工具

news2024/11/16 3:45:09

01.什么是 Webpack

目标

了解 Webpack 的概念和作用，以及使用

讲解

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

    在这里插入图片描述

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

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

    在这里插入图片描述

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

    • 把 less/sass 转成 css 代码
    • 把 ES6+ 降级成 ES5 等
    • 支持多种模块文件类型，多种模块标准语法

  5. 为何不学 vite？

    现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用

  6. 体验 Webpack 打包 2 个 JS 文件内容

  7. 需求：封装 utils 包，校验用户名和密码长度，在 index.js 中使用，使用 Webpack 打包

  8. 步骤：

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

      npm init -y

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

      • src/utils/check.js

        /**
 * 目标：封装检验用户名和密码长度的函数
 */
export const checkUserName = uname => {
  return uname.length >= 8
}
export const checkPassWord = pwd => {
  return pwd.length >= 6
}

export default {
  checkUserName,
  checkPassWord
}

      • src/index.js

        /**
 * 目标：引入工具函数使用
 */
import { checkUserName, checkPassWord } from './utils/check.js'
const unameResult = checkUserName('itheima007')
const pwdResult = checkPassWord('7654321')
console.log(unameResult, pwdResult)

    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 分发文件夹（压缩和优化后，用于最终运行的代码）

  9. 需求最终流程图：

    在这里插入图片描述

小结

  1. Webpack 有什么用?

    答案
    • 压缩，转译，整合，打包我们的静态模块

  2. Webpack 怎么用？

    答案
    • 初始化环境，编写代码，安装 Webpack 软件包，配置自定义命令，打包体验查看结果

  3. 如何运行 package.json 里的自定义命令？

    答案
    • npm run 自定义命令

  4. Webpack 默认入口和出口？

    答案
    • src/index.js 和 dist/main.js

02.修改 Webpack 打包入口和出口

目标

了解 Webpack 配置文件使用，影响 Webpack 打包过程和结果

讲解

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

  2. 步骤：

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

    2. 导出配置对象，配置入口，出口文件路径

      const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src/main.js'), // 入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
    clean: true // 先清空 dist，然后再输出最新内容
  }
}

    3. 重新打包观察

  3. 图解：

    在这里插入图片描述

小结

  1. 如何影响 Webpack 打包过程?

    答案
    • 查文档，新建配置文件和配置属性

03.案例-注册用户-长度判断

目标

体验前端项目代码，如何被 Webpack 打包和使用

讲解

  1. 需求：点击注册按钮，判断用户名和密码长度是否符合要求

  2. 步骤：

    1. 新建 public/index.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）

      在这里插入图片描述

    2. 核心 JS 代码写在 src/main.js 打包入口文件

      /**
 * 目标：点击注册，检验用户名和密码长度
 */
document.querySelector('.login-btn').addEventListener('click', () => {
  const username = document.querySelector('.username').value
  const password = document.querySelector('.password').value

  if (!checkUserName(username)) {
    alert('用户名长度要大于等于8位')
    return
  } else if (!checkPassWord(password)) {
    alert('密码长度要求大于等于6位')
    return
  }

  console.log('用户名和密码长度符合要求')
})

    3. 运行自定义命令，让 Webpack 打包 JS 代码

    4. 手动复制 index.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/index.html 在浏览器查看效果

      在这里插入图片描述

小结

  1. Webpack 打包后的前端代码是如何运行的?

    答案
    • 手动引入到 html 文件中，再交给浏览器运行

04.Webpack 自动生成 html 文件

目标

让 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: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板
    })
  ]
};

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

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

小结

  1. html-webpack-plugin 插件怎么用?

    答案
    • 找到插件文档，下载到项目中，配置到 Webpack 的配置文件中即可使用

05.Webpack-打包 css 代码

目标

让 Webpack 能够打包 css 代码

讲解

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

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

    • 加载器 css-loader：解析 css 代码
    • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

  3. 步骤：

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

      /**
 * 目标：引入 css 文件内容
 */
import './css/index.css'

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

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

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

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

      // ...

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

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

小结

  1. 加载器的作用是什么?

    答案
    • 让 Webpack 识别更多的代码内容类型

06.Webpack-打包 less 代码

目标

让 Webpack 拥有打包 less 代码功能

讲解

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

  2. 步骤：

    1. 准备 less 样式引入到 src/main.js 中

      /**
 * 目标：引入 less 文件内容
 */
import '@/less/index.less'

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

      npm i less less-loader --save-dev

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

      // ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      // ...
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ]
  }
};

    4. 打包后运行 dist/index.html 观察效果

小结

  1. Webpack 支持 less 代码打包需要哪 2 个软件包?

    答案
    • 需要 less less-loader 这 2 个软件包

07.Webpack-打包图片

目标

让 Webpack 支持图片等资源打包

讲解

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

  2. 步骤：

    1. 准备图片素材到 src/assets 中（存放资源模块 - 图片/字体图标等）

    2. 在 index.less 中给 body 添加背景图

      body{
  background: url(../assets/background.png) no-repeat center center;
}

    3. 在 main.js 中给 img 标签添加 logo 图片

      /**
 * 目标：要给 img 标签设置一个 logo 图片
 * 注意：再赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来
 */
import imgObj from '@/assets/logo.png'
document.querySelector('.logo-img').src = imgObj

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

      // ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      // ...
      { // 针对资源模块（图片，字体文件，图标文件等）处理
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
        generator: { // 输出文件时，路径+名字
          filename: 'assets/[hash][ext]'
        }
      }
    ]
  }
};

    5. 打包后运行 dist/index.html 观察效果

  3. 注意：

    • 小于 8KB 文件会被转成 data URI（base64 字符串）打包进 JS 文件中（好处：可以减少网络请求次数，缺点：增加 30% 体积）
    • 大于 8KB 文件会被复制到 dist 下，自动替换使用代码的图片名字

小结

  1. 资源模块指的是什么?

    答案
    • 图片，字体文件等等

08.Webpack 集成 babel 编译器

目标

让 Webpack 集成 babel 编译器功能处理 JS 代码

讲解

  1. babel 定义：是一个 JavaScript 语法编译器，将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

  2. babel-loader：让 Webpack 可以使用 babel 转译 JavaScript 代码

  3. 步骤：

    1. 编写一段映射数组元素，每个数值 + 1 的代码（要求用箭头函数）

      /**
 * 目标：让 Webpack + Babel 编译降级 JS 语法
 */
const arr = [1, 2, 3]
const result = arr.map(val => val + 1)
console.log(result)

    2. 下载 babel babel-loader core 本地软件包

      npm i babel-loader @babel/core @babel/preset-env -D

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

      // ...

module.exports = {
  // ...
  module: { // 加载器
    rules: [ // 规则列表
      // ...
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 排除指定目录里的 js （不进行编译降级）
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 预设规则
          }
        }
      }
    ],
  }
};

    4. 打包运行 dist/index.html 观察效果

  4. 各个软件包的作用表格：

    模块作用
    @babel/coreJs 编译器，分析代码
    @babel/preset-envbabel 预设，规则
    babel-loader让 webpack 翻译 js 代码

小结

  1. babel 编译器的作用?

    答案
    • 把 ECMAScript2015+ 语法向后转换，兼容低版本浏览器

09.案例-注册用户-完成功能

目标

在 Webpack 环境下，使用 npm 下包作用在前端项目

讲解

  1. 需求：点击注册按钮，基于 npm 下载 axios 包，完成提交用户名和密码到服务器完成注册功能

  2. 步骤：

    1. 使用 npm 下载 axios

      npm i axios

    2. 引入到 src/main.js 中编写业务实现

      /**
 * 目标：基于 axios 完成注册用户功能
 */
import axios from 'axios'
document.querySelector('.login-btn').addEventListener('click', () => {
  const username = document.querySelector('.username').value
  const password = document.querySelector('.password').value

  if (!checkUserName(username)) {
    alert('用户名长度要大于等于8位!!!')
    return
  } else if (!checkPassWord(password)) {
    alert('密码长度要求大于等于6位')
    return
  }

  console.log('用户名和密码长度符合要求')
  axios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username,
      password
    }
  }).then(result => {
    alert(result.data.message)
  }).catch(error => {
    alert(error.response.data.message)
  })
})

    3. 打包后运行 dist/index.html 观察效果

  3. 注册用户功能图解：

    在这里插入图片描述

小结

  1. npm 下载的包如何作用在前端项目上?

    答案
    • 被 Webpack 打包处理后，再引入到 html 文件中运行

10.Webpack 开发服务器

目标

体验 webpack-dev-server 开发服务器，快速开发应用程序

讲解

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

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

  3. 步骤；

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

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

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

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

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

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

小结

  1. webpack-dev-server 的作用?

    答案
    • 启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上

11.Webpack 打包模式

目标

了解不同打包模式对代码和环境的影响

讲解

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

  2. 分类：

    模式名称模式名字特点
    开发模式development调试代码，实时加载，模块热替换等
    生产模式production压缩代码，资源优化，更轻量等

  3. 如何设置影响 Webpack呢？

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

      // ...

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

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

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

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

小结

  1. 两种模式的区别?

    答案
    • 开发模式注重代码热替换更快，让开发调试代码更便捷，生产模式注重项目体积更小，更轻量，适配不同的浏览器环境

12.Webpack 开发环境调错 source map

目标

在开发环境如何精准定位到报错源码位置

讲解

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

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

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

    // ...

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

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

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

小结

  1. 为何打包后，在控制台无法准确定位到源码的位置信息?

    答案
    • 因为 Webpack 把代码压缩和混淆了

13.Webpack 设置解析别名路径

目标

设置 Webpack 如何设置路径别名，方便我们引入目标模块

讲解

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

  2. 例如：

    1. 原来路径如下：

      import { checkUsername,  checkPassword } from '../src/utils/check.js'

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

      // ...

module.exports = {
  // ...
  resolve: {
    alias: {
      MyUtils: path.resolve(__dirname, 'src/utils'),
      '@': path.resolve(__dirname, 'src')
    }
  }
}

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

      import { checkUsername,  checkPassword } from 'MyUtils/check.js'
import { checkUsername,  checkPassword } from '@/utils/check.js'

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

小结

  1. 路径中的 ‘@’ 符号代表什么意思？

    答案
    • 看在 webpack 配置中的别名路径是什么，就会在打包时替换成哪个路径使用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1073870.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Git分支教程：详解分支创建、合并、删除等操作

Git分支教程：详解分支创建、合并、删除等操作

GIT分支是Git中用于开发和管理代码的重要概念之一。每个分支都是一个独立的代码版本，可以在分支上进行修改和提交，而不影响主线（通常是master分支）上的开发工作。 分支的作用： 并行开发：多个开发人员可以…
阅读更多...
vue3学习（一）---新特性

vue3学习（一）---新特性

文章目录 vue3和vue2的区别重写双向数据绑定优化Vdom性能瓶颈patch flag 优化静态树 FragmentTree shaking组合式API写法 vue3和vue2的区别 重写双向数据绑定 vue2 基于Object.defineProperty()实现vue3 基于Proxy proxy与Object.defineProperty(obj, prop, desc)方式相比有以…
阅读更多...
bootstrapjs开发环境搭建

bootstrapjs开发环境搭建

Bootstrapjs是一个web前端页面应用开发框架，其提供功能丰富的JavaScript工具集以及用户界面元素或组件的样式集，本文主要描述bootstrapjs的开发环境搭建。 如上所示，使用nodejs运行时环境、使用npm包管理工具、使用npm初始化一个项目工程test…
阅读更多...
直流无刷电机简介

直流无刷电机简介

一、 简介 直流无刷电机（简称BLDC）是随着半导体电子技术发展而出现的机电一体化电机，是永磁式同步电机的一种。 直流无刷电机与直流有刷电机的区别：直流有刷电机利用电枢绕组旋转换向；直流无刷电机是采用半导体开关器…
阅读更多...
全局变量报错：\Output\STM32.axf: Error: L6218E: Undefined symbol

全局变量报错：\Output\STM32.axf: Error: L6218E: Undefined symbol

全局变量报错： .\Output\STM32.axf: Error: L6218E: Undefined symbol key_num (referred from main.o). 这里只说全局变量哦，这是因为你在调用的.c文件里 把定义写在了函数里面，写函数外面就没事了 改为： .h的声明文件根本不用写…
阅读更多...
openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw

openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw

文章目录 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw94.1 编译mysql_fdw94.2 使用mysql_fdw94.3 常见问题94.4 注意事项 openGauss学习笔记-94 openGauss 数据库管理-访问外部数据库-mysql_fdw openGauss的fdw实现的功能是各个openGauss数据库及远程…
阅读更多...
vue3中的父子组件传递slot的方式

vue3中的父子组件传递slot的方式

缘起 目前的 vue3 工程，有处相似的地方，上面是一个 a-step 组件，下面是一个 vxetable 的组件，目前有好几处都是各自复制这两个组件，进行各自的处理。所以就要把这处，改成一个组件，供小伙伴们使用…
阅读更多...
什么是列间空调？

什么是列间空调？

列间空调（Chilled Beam Air Conditioning System）是一种先进的空调系统，用于办公室和商业建筑等高要求的室内空间。这种系统采用创新的工作原理，结合空气对流和辐射的方式，提供高效的舒适空调效果。 列间空调系统的工作…
阅读更多...
从零开始读懂相对论：探索爱因斯坦的科学奇迹

从零开始读懂相对论：探索爱因斯坦的科学奇迹

💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】 引言 阿尔伯特爱因斯坦…
阅读更多...
STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

STM32 Cube项目实战开发过程中--调用Freemodbus通信出现异常问题原因分析--ADC DMA初始化顺序导致串口数据异常问题解决办法

文章目录 1.ADC与DMA初始化顺序导致使用Freemodbus串口通信异常：2.通信异常时串口初始化的顺序为：3.重新调整初始化位置后，通信问题解决：5.重新调整初始化位置后，通信正常：总结：Cube开发库系统默…
阅读更多...
利用KerasCV YOLOv8轻松实现目标精确检测

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测，并附录完整代码。。 自从You Only Look Once（简称 YOLO）的诞生以来，目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言，它是通过在…
阅读更多...
手动快速批量修改文件名

手动快速批量修改文件名

方法一 1.选中需要批量修改的文件，如图1 图1 2.按F2键，输入文件名。如图2. 图2 3.Enter，效果如图3. 图3 方法二 1.新建记事本文档，输入如下代码。如图4. DIR . /B>文件名列表.csv 含义是：提取出带有“.”的文…
阅读更多...
06-Zookeeper选举Leader源码剖析（一）

06-Zookeeper选举Leader源码剖析（一）

上一篇：05-Zookeeper典型使用场景实战 一、为什么要看源码 提升技术功底：学习源码里的优秀设计思想，比如一些疑难问题的解决思路，还有一些优秀的设计模式，整体提升自己的技术功底深度掌握技术框架：源码看…
阅读更多...
完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY

完美解决Android adb install 安装提示 INSTALL_FAILED_TEST_ONLY 目录 所遇问题 有些时候我们用命令进行安装apk如下： adb install xxx.apk但是会安装不成功，报如下错误： 错误现象：提示：Failed to install app-d…
阅读更多...
【Go】Fyne跨平台图形界面框架使用

【Go】Fyne跨平台图形界面框架使用

😏★,:.☆(￣▽￣)/$:.★ 😏 这篇文章主要介绍Fyne跨平台图形界面框架使用。 学其所用，用其所学。——梁启超 欢迎来到我的博客，一起学习，共同进步。 喜欢的朋友可以关注一下，下次更新…
阅读更多...
文本编辑器去除PDF水印

文本编辑器去除PDF水印

用文本编辑器打开pdf，搜索水印的特殊文字，全部替换。 另外一个水印字母间有空格。 替换完后保存。 重新打开pdf：
阅读更多...
国产麒麟V10桌面操作系统上运行WinForm程序

国产麒麟V10桌面操作系统上运行WinForm程序

将需要运行的程序拷贝到系统中，如图： 选择exe后点击鼠标右键，选择打开方式，然后选择CrossOver(安装)，如图： 打开CrossOver 软件安装程序后，点击选择容器，然后选择Windows 10 容器…
阅读更多...
交互式ICP

交互式ICP

以下程序演示如何编写交互式ICP查看器。该程序将加载点云并对其进行刚性变换。之后&#xff0c;使用ICP算法将变换后的点云与原来的点云对齐。每次用户按下“空格”&#xff0c;进行ICP迭代&#xff0c;刷新可视化界面。 代码实现 资源准备 monkey.ply #include <string&…
阅读更多...
用Python简单的实现一下六大主流小说平台小说下载（附源码）

用Python简单的实现一下六大主流小说平台小说下载（附源码）

很多小伙伴学习Python的初衷就是为了爬取小说&#xff0c;方便又快捷~ 辣么今天咱们来分享6个主流小说平台的爬取教程~ 一、流程步骤 流程基本都差不多&#xff0c;只是看网站具体加密反爬&#xff0c;咱们再进行解密。 实现爬虫的第一步? 1、去抓包分析&#xff0c;分析数…
阅读更多...
从零开始：制作出色的产品原型图的详细教程

从零开始：制作出色的产品原型图的详细教程

在设计产品的初始版本或模型时&#xff0c;产品原型起着非常重要的作用&#xff0c;可以帮助设计师和团队更好地了解产品需求和用户需求&#xff0c;优化和改进设计&#xff0c;确保设计最终满足用户的需求和期望。如果你不知道如何绘制产品原型图&#xff0c;绘制产品原型图的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023