15.Webpack进阶使用

news2024/10/2 17:17:23

一.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' // 输出文件
    })
  ]
}

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

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

二.Webpack-打包 css 代码

1. 注意：

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

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

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

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 代码中继续使用，所以没有定义变量接收

  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/login/index.html 观察效果，看看准备好的样式是否作用在网页上

三.优化-提取 css 代码

1. 需求：

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

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

3. 步骤：

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

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

  2. 配置 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()
  ]
};

  3. 打包后观察效果

4. 注意：

不能和 style-loader 一起使用

5. 好处：

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

四.优化压缩过程

1. 需求：

把提出的 css 文件内样式代码压缩

2. 需要：

css-minimizer-webpack-plugin 插件来实现

3. 步骤：

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

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

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

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

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

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

五.Webpack-打包 less 代码

1. 加载器 less-loader：

把 less 代码编译为 css 代码，还需要依赖 less 软件包

2. 步骤：

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

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

  2. 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'

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

    npm i less less-loader --save-dev

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

    // ...

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

  5. 打包后运行 观察效果

六.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)

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

    // ...

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

  5. 打包后运行观察效果

七.Webpack 搭建开发环境

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

1. 作用：

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

2. 步骤；

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

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

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

    // ...

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

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

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

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

八.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. 注意：

命令行设置的优先级高于配置文件中的，推荐用命令行设置

5. 体验：

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

小结

  1. 两种模式的区别?

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

九.Webpack 打包模式的应用

1. 需求：

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

2. 方案

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

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

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

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

3. 步骤：

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

npm i cross-env --save-dev

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

在这里插入图片描述

3.在 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',
        ],
      }
    ],
  },

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

十.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)
    })
  ]
}

十一.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 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

十二.Webpack 设置解析别名路径

1. 解析别名：

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

2. 例如：

  1. 原来路径如下：

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

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

    // ...

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

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

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

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

十三.优化-CDN使用

目标

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

讲解

1. 需求：

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

2. CDN定义：

内容分发网络，指的是一组分布在各个地区的服务器

3. 作用：

把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

4. 好处：

减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

5. 实现需求的思路图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6. 步骤：

1.在 html 中引入第三方库的 CDN 地址 并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios'
  }
}

// ...
const config = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
      useCdn: process.env.NODE_ENV === 'production'
    })
  ]
}

3.两种模式下打包观察效果

十四.Webpack 多页面打包

1. 概念：

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

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

2. 需求：

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

3. 步骤：

  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']
    })
  ]
}

  4. 重新打包观察效果

十五.优化-分割公共代码

1. 需求：

把 2 个以上页面引用的公共代码提取

2. 步骤：

1.配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }

2.打包观察效果

小结

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

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

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

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

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

需要 less less-loader 这 2 个软件包

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

图片，字体文件等等

5. webpack-dev-server 的作用?

启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上
6. 为何打包后，在控制台无法准确定位到源码的位置信息?

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

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

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

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

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

相关文章

DataGrip 2023：让数据库开发变得更简单、更高效 mac/win

DataGrip 2023：让数据库开发变得更简单、更高效 mac/win

JetBrains DataGrip 2023是一款功能强大的数据库IDE&#xff0c;专为数据库开发和管理而设计。通过DataGrip&#xff0c;您可以连接到各种关系型数据库管理系统(RDBMS)&#xff0c;并使用其提供的一组工具来查询、管理、编辑和开发数据库。 DataGrip 2023软件获取 DataGrip 2…
阅读更多...
TimescaleDB 集群安装部署

TimescaleDB 集群安装部署

文章目录 1.安装环境2.安装TimescaleDB2.1. 安装PostgreSQL2.2.安装Timescaledb插件2.3.配置TimescaleDB 3.集群配置4.创建数据库5.测试 开源中间件 # TimescaleDBhttps://iothub.org.cn/docs/middleware/ https://iothub.org.cn/docs/middleware/timescale/timescale-deploy-…
阅读更多...
SPI读取TLE5012B编码器角度数据_ACM32G103

SPI读取TLE5012B编码器角度数据_ACM32G103

买到一个带编码器的电机&#xff0c;卖家留出来读取编码器数据的接口有SPI 具体的原理图如下&#xff1a; P2标注的是SPI的接口&#xff0c;其中MISO和MOSI是硬件连接到一起的 使用ACM32G103的硬件SPI2去读取其角度数据 原理大概如下&#xff1a; 1、先发送读取数据的指令&…
阅读更多...
在colab上训练YOLOv5

在colab上训练YOLOv5

在colab上训练YOLOv5 参考链接&#xff1a;知乎 牛头检测 1.首先在自己的本地电脑上下载YOLO 新建一个文件夹YOLO&#xff0c;输入以下命令下载压缩包&#xff1a; cmd git clone https://github.com/ultralytics/yolov5.git2.将YOLO压缩包上传到colab 首先在colab上新建一…
阅读更多...
CSS中有哪些方式可以隐藏页面元素（区别详解）

CSS中有哪些方式可以隐藏页面元素（区别详解）

文章目录 一、前言二、实现方式display:nonevisibility:hiddenopacity:0设置height、width属性为0position:absoluteclip-path小结 三、区别参考文献 一、前言 在平常的样式排版中&#xff0c;我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种&#xff0c;它…
阅读更多...
STM32驱动W5500作为客户端进行通讯

STM32驱动W5500作为客户端进行通讯

STM32驱动W5500作为客户端进行通讯 模块简介引脚说明接线代码部分代码测试是否通讯成功 模块简介 SR-ES1内嵌Wiznet的W5500芯片&#xff0c;使用硬件逻辑门电路实现TCP/IP协议栈的传输层及网络层&#xff08;如&#xff1a;TCP&#xff0c;UDP&#xff0c;ICMP&#xff0c;IPv…
阅读更多...
Linux：非常实用的Linux命令

Linux：非常实用的Linux命令

非常实用的Linux命令 系统服务管理 systemctl systemctl命令是Systemd系统和服务管理器的一部分&#xff0c;用于控制systemd系统和服务管理器。Systemd是大多数最新的Linux发行版使用的初始化系统和服务管理器&#xff0c;它用于启动守护进程并管理它们的运行。systemctl提…
阅读更多...
element-ui plus v2.60 终于修复了 radio checkbox 取值不明确的问题，label value 值

element-ui plus v2.60 终于修复了 radio checkbox 取值不明确的问题，label value 值

element-ui plus v2.60 终于修复了 radio checkbox 取值不明确的问题&#xff0c;label value 值 昨天想反馈这个关于 label 和 value 的问题的时候&#xff0c;发现新版本已经修正这个问题了。 一、ElementUI 旧版关于 label 和 value 的问题 从之前 element-ui 用过来的&a…
阅读更多...
第十一篇 - 应用于市场营销视频场景中的人工智能和机器学习技术 – Video --- 我为什么要翻译介绍美国人工智能科技巨头IAB公司（1）

第十一篇 - 应用于市场营销视频场景中的人工智能和机器学习技术 – Video --- 我为什么要翻译介绍美国人工智能科技巨头IAB公司（1）

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒体…
阅读更多...
论文阅读《FENET: FOCUSING ENHANCED NETWORK FOR LANE DETECTION》

论文阅读《FENET: FOCUSING ENHANCED NETWORK FOR LANE DETECTION》

ABSTRACT 受人类驾驶专注力的启发&#xff0c;这项研究开创性地利用聚焦采样&#xff08;Focusing Sampling&#xff09;、部分视野评估&#xff08;Partial Field of View Evaluation&#xff09;、增强型 FPN 架构和定向 IoU 损失&#xff08;Directional IoU Loss&#xff…
阅读更多...
【Pytorch】新手入门：基于sklearn实现鸢尾花数据集的加载

【Pytorch】新手入门：基于sklearn实现鸢尾花数据集的加载

【Pytorch】新手入门&#xff1a;基于sklearn实现鸢尾花数据集的加载 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…
阅读更多...
递归、搜索与回溯算法简介

递归、搜索与回溯算法简介

何为递归&#xff1a;递归就是递去归来&#xff0c;函数自己调用自己的情况。 不在意递归的细节展开图 把递归的函数当成黑盒&#xff08;给黑盒一个东西&#xff0c;它就能完成想要的事&#xff09; 相信黑盒一定能完成这个任务 深度优先遍历和深度优先搜索都是指一个东西dfs…
阅读更多...
STM32---通用定时器（一）理论基础

STM32---通用定时器（一）理论基础

写在前面&#xff1a;在STM32F103中有众多的定时器&#xff0c;其中包括两个基本定时器&#xff0c;基本定时器的内容已经在上节进行了介绍&#xff0c;基本定时器的功能、结构、使用都较为简单。而STM32F1中还含有4个通用定时器&#xff08;TIM2\3\4\5&#xff09;,这些定时器…
阅读更多...
So you think you understand IP fragmentation?

So you think you understand IP fragmentation?

文章目录 前言一、Why care?二、Prevention三、Well-understood?四、Introducing fragquiz五、A novel (?) algorithm六、Reader challenge七、traceroute八、ICMP参考资料 前言 本文来自&#xff1a;https://lwn.net/Articles/960913/ February 7, 2024This article was …
阅读更多...
数据库的基本数据类型

数据库的基本数据类型

基本数据类型之整型 【1】整型的分类 tinyint smallint mediumint int bigint 【2】整型的符号 符号不是用来限制位数的而是用来控制显示长度的 【3】tinyint 是否带符号 默认情况下是带符号, 默认带的符号是 号 超出最大范围 超出会报错 【4】unsigned(无符号) 每…
阅读更多...
【C语言】文件操作篇-----程序文件和数据文件，文件的打开和关闭，二进制文件和文本文件，fopen，fclose【图文详解】

【C语言】文件操作篇-----程序文件和数据文件，文件的打开和关闭，二进制文件和文本文件，fopen，fclose【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为【C语言】文件操作篇-----程序文件和数据文件&#xff0c;文件的打开和关闭&#xff0c;二进制文件和文本文件【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 在了解完动态内存管…
阅读更多...
【PHP安全】PHP伪协议

【PHP安全】PHP伪协议

PHP伪协议&#xff1a; file:// #访问本地文件系统http:// #访问HTTPs网址ftp:// #访问ftp URLphp:// #访问输入输出流zlib:// #压缩流data:// #数据&#xff08;RFC 2397&#xff09;ssh2:// #security shell2expect:// #处理交互式的流glob:// #查找匹配的文件路径phar:// #P…
阅读更多...
【神经网络与深度学习】深度神经网络（DNN）

【神经网络与深度学习】深度神经网络（DNN）

概述 深度神经网络&#xff08;Deep Neural Networks&#xff0c;DNN&#xff09;是一种由多个隐藏层组成的神经网络模型。每个隐藏层由多个神经元组成&#xff0c;这些神经元通过权重和激活函数进行信息传递和计算。 深度神经网络通过多层的非线性变换&#xff0c;可以学习到…
阅读更多...
狂雨CMS-采集规则(novelfull.com)

狂雨CMS-采集规则(novelfull.com)

1. 填写采集规则的基本信息 首先点击采集管理中的添加按钮来新建规则&#xff1a; 然后进入到信息页面填写&#xff0c;包括&#xff1a; 规则名称&#xff1a;一般以要采集的源站名命名。 网站编码&#xff1a;默认自动检测即可。 类型&#xff1a;根据网站类型来选择&#x…
阅读更多...
遗传算法（GA）求解基于栅格地图的机器人最优路径规划，可以自行修改地图（提供MATLAB代码）

遗传算法（GA）求解基于栅格地图的机器人最优路径规划，可以自行修改地图（提供MATLAB代码）

通过栅格法建立栅格地图作为机器人路径规划的工作环境,采用遗传算法作为机器人路径搜索的规则.将所有机器人放置于初始位置.经过NC次无碰撞迭代运动找到最优路径.到达目标位置.为防止机器人在路径搜索过程中没有达到最大迭代次数时路径大小已不发生变化而陷入局部最优。 一、部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023