十五、Webpack打包图片-js-Vue、Label命令、resolve模块解析

一、webpack打包图片

（1）加载图片案例准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

  1. img元素，设置src属性；
  2. 其他元素（比如div），设置background-image的css属性；

这个时候我们打包会报错：

ERROR in ./src/img/zznh.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)@ ./src/component/cpns.js 5:0-39 21:12-21@ ./src/index.js 2:0-25

（2）认识asset module type

我们当前使用的webpack版本是webpack5：

  • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader； 

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  1. asset/resource 发送一个单独的文件并导出 URL。
    •  之前通过使用 file-loader 实现；
  2. asset/inline 导出一个资源的 data URI。
    • 之前通过使用 url-loader 实现；
  3. asset/source 导出资源的源代码
    • 之前通过使用 raw-loader 实现；
  4. asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。
    • 之前通过使用 url-loader，并且配置资源体积限制实现；

（3）asset module type的使用

我们在webpack.config.js配置文件中新增了这2行代码。然后打包之后，图片是正常能够加载的。

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ],},{test: /\.(png|jpe?g|svg|gif)$/,type: "asset"}],},
}

 

（4）asset module type 四种模块类型的区别

我们讲下上述说的资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader。我们只看124，3是提供源码使用场景很少，有兴趣的小伙伴可以自己去玩一下。

① type: "asset/resource"

我们使用两种方式使用图片，然后将type设置成下图所示 type: "asset/resource" ：

设置完以后我们删掉之前打包后的文件夹build，重新npm run build构建一下。

不难看出，webpack将我下面的两种图片打包进行了一次重命名，是通过哈希算法生成了对应的一个哈希值，对这2个图片资源进行一个复制。 实际上就是把这2张图片的资源路径给设置到我们创建的image元素和div的元素background那个地方。

结论：所以当 type: "asset/resource"时，webpack将打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中。

 

 

② type: "asset/inline"

我将打包过后的文件夹目录build删掉，type设置成type: "asset/inline"，重新再进行一次打包

然后我们打开打包存放的目录build，发现没有图片了。

然后我们打开html 按F12查看发现图片被进行了编码，这个编码被称之为base64编码。编码之后的结果被放在inline，也就是行内了，放在build目录下面的bundle.js文件里面了。

 

具体base64编码是啥，我们后面再讲。

③ 各自的优劣势 type: "asset/inline" 和 type: "asset/resource"

我们现在先思考一个问题，把图片编码后放在js打包文件中是好还是不好呢？对于我们性能来说是有优势还是劣势呢？

{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。type: "asset/inline"
}

结论：

type: "asset/resource"的缺点：因为多了两张图片，所以需要多发送两次http网络请求，

type: "asset/inline"的缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。

 

④ url-loader的limit效果

对于 resource和 inline 的优缺点我们可以中和一下：

对于小一点的图片，可以进行base64编码。

对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片。

那怎么才能做到这一点呢？

开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

  • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
  • 而大的图片也进行转换，反而会影响页面的请求速度；

我们需要两个步骤来实现： 

  • 步骤一：将type修改为asset；
  • 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

    • Data URL是一种特殊的URL，可以将数据编码为URL字符串中的一部分。它可以用于嵌入图像、音频、视频和其他数据，而不必将它们作为独立的文件进行加载。Data URL以"data:"作为协议标识符，后面跟着数据的MIME类型和编码，然后是实际的数据本身。例如，一个用base64编码的PNG图像的data URL可能是这样的：

      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAI.......

      其中"data:image/png"指定了MIME类型，"base64"指定了数据使用的编码，"iVBORw0KGgoAAAANSUhEUgAAAAI......."是实际的base64编码数据。

我们把配置文件改成这样子：

 

再重新打包的时候发现他只复制了一个图片并用哈希值命名，还有一个图片被base64编码放在打包的bundle.js文件中了。

是不是满足我的诉求了，大于一定规格的图片我编码，小于一定规格的图片我直接复制后用哈希值命名。

 

⑤ 自定义文件的输出路径和文件名

通过哈希值重新命名的图片，光看名字我们已经不知道他对应的原图是具体哪一个了。

 

那我们如何可以自定义文件的输出路径和文件名呢？

  • 方式一：修改output，添加assetModuleFilename属性；
  • 方式二：在Rule中，添加一个generator属性，并且设置filename；

 

我们先来试一下方法一：

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),assetModuleFilename: "abc.png"},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// 缺点；多图片加载的两次网络请求，两张图片就是两次请求。// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。// 缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。// type: "asset/inline"// 3. 合理的规范：// 3.1 对于小一点的图片，可以进行base64编码// 3.2 对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片type: "asset",parser: {dataUrlCondition: {// 1kb=1024byte, 60 * 1024 就是最大值是60字节。maxSize: 60 * 1024, },},},],},
}

然后删掉打包的文件目录，重新打包npm run build，发现图片名字是不是变成了abc.png啦。

但是我们这个方法并不常用，因为如果是字体文件的话你用这个名字命名是不是不好？

我们试一下方法二：

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),// assetModuleFilename: "abc.png"},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// 缺点；多图片加载的两次网络请求，两张图片就是两次请求。// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。// 缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。// type: "asset/inline"// 3. 合理的规范：// 3.1 对于小一点的图片，可以进行base64编码// 3.2 对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片type: "asset",parser: {dataUrlCondition: {// 1kb=1024byte, 60 * 1024 就是最大值是60字节。maxSize: 60 * 1024, },},generator: {filename: "cba.png"}},],},
}

 我们重新打包试一下效果：是不是打包的文件名变为cba.png啦。

但是现在我又有一个疑惑，我如果有多张图片的话，每张图片都叫cba.png是不是就不合适了？后面的会把前面的图片直接覆盖掉。

所以我们现在得用一个占位符：

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),// assetModuleFilename: "abc.png"},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// 缺点；多图片加载的两次网络请求，两张图片就是两次请求。// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。// 缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。// type: "asset/inline"// 3. 合理的规范：// 3.1 对于小一点的图片，可以进行base64编码// 3.2 对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片type: "asset",parser: {dataUrlCondition: {// 1kb=1024byte, 60 * 1024 就是最大值是60字节。maxSize: 60 * 1024,},},generator: {// 常见的占位符// 1. name: 指向原来的图片名称filename: "[name].png",},},],},
}

效果是不是显而易见啦。[name] 指向的是原来的图片名称。

我们再试一下 [ext] ，他是处理文件的扩展名。

原来图片是什么文件扩展名，那就是什么扩展名。

这样子其实还会带来其他问题， 如果我在不同目录里，存在相同的名字的图片文件咋办？这样子的话打包起来还是会起冲突是不是。

所以我们得保留原来的哈希值，这样子就能文件名不会重复从而被覆盖。

 

此时又有小伙伴们觉得这个打包出来的图片名字太长了，我能不能对哈希值截取部分，当然可以。

filename: "[name]_[hash:8][ext]"

 

 

 有小伙伴们又提出来一个问题，我图片很多的话，打包和js文件一起全部放在build目录下，这样子看是不是有点乱？我们可不可以整理一下？当然可以！

我们可以设置 

filename: "img/[name]_[hash:8][ext]"

效果展示：是不是在打包目录下又多了一个img目录，打包的图片文件放在了build/img目录下？

完整代码我就放下面啦：

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),// assetModuleFilename: "abc.png"},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// 缺点；多图片加载的两次网络请求，两张图片就是两次请求。// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。// 缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。// type: "asset/inline"// 3. 合理的规范：// 3.1 对于小一点的图片，可以进行base64编码// 3.2 对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片type: "asset",parser: {dataUrlCondition: {// 1kb=1024byte, 60 * 1024 就是最大值是60字节。maxSize: 60 * 1024,},},generator: {// 常见的占位符// 1. name: 指向原来的图片名称// 2. ext: 指向原来的文件的扩展名// 3. hash: 保留原来webpack生成的hashfilename: "[name]_[hash:8][ext]",},},],},
}

二、babel

（1）为什么需要babel？

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

  • 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
  • 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；

那么，Babel到底是什么呢？

  • Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
  • 包括：语法转换、源代码转换等； 

 

（2）babel命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel，需要安装如下库：

  • @babel/core：babel的核心代码，必须安装；
  • @babel/cli：可以让我们在命令行使用babel；
  • npm install @babel/cli @babel/core -D

     

使用babel来处理我们的源代码:

  • src：是源文件的目录；
  • --out-dir：指定要输出的文件夹dist；
  • npx babel src --out-dir dist
     

 

（3）插件的使用（了解，真实开发中不会这么做）

比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

npm install @babel/plugin-transform-arrow-functions -Dnpx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果：我们会发现 const 并没有转成 var

  • 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
  • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能；
npm install @babel/plugin-transform-block-scoping -D npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

完整配置如下： 

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),// assetModuleFilename: "abc.png"},module: {rules: [{// 告诉webpack你要匹配什么类型的文件test: /\.css$/,// 用什么loader去处理use: [// 注意:  style-loader在css-loader的前面，因为loader的执行顺序是从右向左（或者说从下往上，从后往前）。// { loader: "style-loader" },// { loader: "css-loader" },],// 简写一: 如果loader只有一个, 可以把use省略// loader: "css-loader"// 简写二: 如果不需要其他option属性时，可以直接写loader字符串形式。use: ["style-loader","css-loader","postcss-loader",// 下方注释掉的加options属性时，还可以在postcss.config.js文件中添加。// {//   loader: "postcss-loader",//   options: {//     postcssOptions: {//       plugins: ["autoprefixer"],//     },//   },// },],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|jpe?g|svg|gif)$/,// 1. 打包两张图片，并且这两张图片有自己的地址，将地址设置到img/img-bg里面的background中// 缺点；多图片加载的两次网络请求，两张图片就是两次请求。// type: "asset/resource"// 2. 将图片进行base64的编码，并且直接将编码后的源码放到打包的js文件中。// 缺点： 造成js文件非常大，下载js文件本身消耗时间非常长。// type: "asset/inline"// 3. 合理的规范：// 3.1 对于小一点的图片，可以进行base64编码// 3.2 对于大一点的图片，单独的进行打包，形成url地址，单独的请求这个url图片type: "asset",parser: {dataUrlCondition: {// 1kb=1024byte, 60 * 1024 就是最大值是60字节。maxSize: 60 * 1024,},},generator: {// 常见的占位符// 1. name: 指向原来的图片名称// 2. ext: 指向原来的文件的扩展名// 3. hash: 保留原来webpack生成的hashfilename: "img/[name]_[hash:8][ext]",},},{test: /\.js$/,use: [{loader: "babel-loader",options: {plugins: ["@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-block-scoping"],},},],},],},
}

 

（4）babel.config.js文件

我们有那么多的语法，如果每个都要挨个安装插件的话，是不是特别麻烦？

而且在webpack.config.js文件中，该配置项是不是特别多 特别不好管理？

能不能像postcsss.config.js文件一样，单独抽离出来？回答是，当然可以。

webpack.config.js配置文件中相关test下注释掉该块代码， 

 

新增babel.config.js文件。

 

（5） babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

  • 后面我们再具体来讲预设代表的含义；

安装@babel/preset-env预设：

  • npm install @babel/preset-env -D 

执行如下命令：

npx babel src --out-dir dist --presets=@babel/preset-env

如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。

是不是很方便？ 

 

常见的预设有三个：

  • env
  • react
  • TypeScript

  三、webpack对vue文件的处理

（1）案例引导

在开发中我们会编写Vue相关的代码，webpack可以对Vue代码进行解析：

  • 接下来我们编写自己的App.vue代码；

 

（2）App.vue的打包过程

① vue-loader

我们对代码打包会报错：我们需要合适的Loader来处理文件。

  •  

这个时候我们需要使用vue-loader：

  • npm install vue-loader -D
     

在webpack的模板规则中进行配置：

  •  

② @vue/compiler-sfc（正常来说安装vue的时候已经默认自动安装这个了）

打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析：

  • npm install @vue/compiler-sfc -D
      

另外我们需要配置对应的Vue插件： 

重新打包即可支持App.vue的写法。 

四、resolve模块解析

 

 

 什么叫起别名？

我们举个🌰栗子~我在utils目录下创建一个abc/cba/nba/why/层级目录下创建一个test.js文件，然后在这个文件中引入utils目录下的math.js，

但是我目前这样导入是不是给人看的特别不清晰？

那我可不可以写成 下面这样子：

import { sum } from "utils/math.js"

目前看是不是不行，因为你这么写的话是不是默认会从node/modules里去查找utils下面的math.js？

但是我又希望我在别的地方真的想用到这个的话，我能直接使用utils，那怎么办？回答：起别名。 

我们直接上代码：

 

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IP175D参考资料和引脚图

IP175D参考资料和引脚图

特性 宽工作温度范围IP175DLF(0C至70C) IP175DLFI (-40C至85C)内置6个MAC和5个PHY 每个端口可配置为10base-t、100Base-TX 最多2K个MAC地址 支持自极性10Mbps 广播风暴防护 汽车MDI-MDIX 支持3个MIL/RMII接口Layer2-4多字段分类器支持8-MultiField输入支持交通政策支持…
阅读更多...
React 全栈体系（四）

React 全栈体系（四）

第二章 React面向组件编程 六、组件的生命周期 1. 效果 需求:定义组件实现以下功能&#xff1a; 让指定的文本做显示 / 隐藏的渐变动画从完全可见&#xff0c;到彻底消失&#xff0c;耗时2S点击“不活了”按钮从界面中卸载组件 <!DOCTYPE html> <html lang"e…
阅读更多...
特殊矩阵的压缩存储（对称矩阵，三角矩阵和三对角矩阵）

特殊矩阵的压缩存储（对称矩阵，三角矩阵和三对角矩阵）

目录 1.对阵矩阵 2.三角矩阵 3.三对角矩阵&#xff08;带状矩阵&#xff09; 均假设数组的下标从0开始 1.对阵矩阵 定义&#xff1a;若对一个n阶矩阵A中的任意一个元素 aᵢ,ⱼ 都有aᵢ,ⱼaⱼ,ᵢ &#xff08;1≤i,j≤n&#xff09;&#xff0c;则称其为对称矩阵。 存储策略…
阅读更多...
⛳ MVCC 原理详解

⛳ MVCC 原理详解

&#x1f38d;目录 ⛳ MVCC 原理详解&#x1f43e; 一、事务回顾&#x1f4d0; 1.1、什么是数据库事务&#xff0c;为什么要有事务&#x1f389; 1.2、事务包括哪几个特性&#xff1f;&#x1f38d; 1.3、事务并发存在的问题1.3.1、脏读1.3.2、不可重复读1.3.3、幻读 &#x1f…
阅读更多...
Android Jetpack 中Hilt的使用

Android Jetpack 中Hilt的使用

Hilt 是 Android 的依赖项注入库&#xff0c;可减少在项目中执行手动依赖项注入的样板代码。执行 手动依赖项注入 要求您手动构造每个类及其依赖项&#xff0c;并借助容器重复使用和管理依赖项。 Hilt 通过为项目中的每个 Android 类提供容器并自动管理其生命周期&#xff0c;…
阅读更多...
依赖项的处理与层的创建与注册

依赖项的处理与层的创建与注册

依赖项的处理与层的创建与注册 依赖项的处理与层的创建与注册 新问题什么是 layer?layer 的创建与注册 与函数同时创建和绑定单独上传 layer 再绑定函数(推荐) 真正的运行时依赖 注册包的约定与平台强关联的运行时 1. 云端安装依赖2. 本地构建 Amazon Linux 2 容器环境3. 利用…
阅读更多...
数字图像滤波的本质

数字图像滤波的本质

一、说明 在数字时代&#xff0c;图像是我们交流和表达不可或缺的一部分。从社交媒体到医学成像&#xff0c;图像的质量和内容非常重要。这就是图像过滤和卷积领域介入的地方&#xff0c;为我们提供了一个转换和完善这些视觉叙事的工具包。 图像过滤不仅仅是让照片看起来更好;这…
阅读更多...
Fiddler 系列教程（二） Composer创建和发送HTTP Request跟手机抓包

Fiddler 系列教程（二） Composer创建和发送HTTP Request跟手机抓包

Fiddler Composer介绍 Composer的官方帮助文档&#xff1a;http://www.fiddler2.com/fiddler/help/composer.asp Fiddler的作者把HTTP Request发射器取名叫Composer(中文意思是&#xff1a;乐曲的创造者), 很有诗意 Fiddler Composer的功能就是用来创建HTTP Request 然后发送…
阅读更多...
Chrome 基于 Wappalyzer 查看网站所用的前端技术栈

Chrome 基于 Wappalyzer 查看网站所用的前端技术栈

1. 找到谷歌商店 https://chrome.google.com/webstore/search/wappalyzer?utm_sourceext_app_menu 2. 搜索 Wappalyzer 3. 添加至Chrome 4. 使用 插件 比如打开 https://www.bilibili.com/ 就可以看到其所以用的前端技术栈了
阅读更多...
【系统设计系列】 负载均衡和反向代理

【系统设计系列】 负载均衡和反向代理

系统设计系列初衷 System Design Primer&#xff1a; 英文文档 GitHub - donnemartin/system-design-primer: Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards. 中文版&#xff1a; https://github.com/donnemart…
阅读更多...
一百七十二、Flume——Flume采集Kafka数据写入HDFS中（亲测有效、附截图）

一百七十二、Flume——Flume采集Kafka数据写入HDFS中（亲测有效、附截图）

一、目的 作为日志采集工具Flume&#xff0c;它在项目中最常见的就是采集Kafka中的数据然后写入HDFS或者HBase中&#xff0c;这里就是用flume采集Kafka的数据导入HDFS中 二、各工具版本 &#xff08;一&#xff09;Kafka kafka_2.13-3.0.0.tgz &#xff08;二&#xff09;…
阅读更多...
ES 集群常用排查命令

ES 集群常用排查命令

说明&#xff1a;集群使用非默认端口9200&#xff0c;使用的是7116端口举例 一、常用命令 #1.集群健康状态 [wlsadminelastic-01~]$ curl -XGET "http://10.219.27.00:7116/_cluster/health?pretty" { cluster name":"cluster" "status"…
阅读更多...
supset只讀權限

supset只讀權限

supset只讀權限
阅读更多...
flutter报错-cmdline-tools component is missing

flutter报错-cmdline-tools component is missing

安装完androidsdk和android studio后&#xff0c;打开控制台&#xff0c;出现错误 解决办法 找到自己安装android sdk的位置&#xff0c;然后安装上&#xff0c;并将下面的勾选上 再次运行 flutter doctor 不报错&#xff0c;出现以下画面 Doctor summary (to see all det…
阅读更多...
在Git中将本地分支推送到远程仓库

在Git中将本地分支推送到远程仓库

这里很明显 我git云端只有一个master分支 然后 我在本地创建了一个develop分支 然后 现在我想将他放在云端 首先 我们要执行 git checkout -b develop将本地切换到 develop 分支上 因为我这里已经选择的就是了 就不需要了 然后我们执行 git push origin develop这样 刷新云…
阅读更多...
队列(Queue)的顶级理解

队列(Queue)的顶级理解

目录 1.队列(Queue) 的概念 2.单链表模拟实现队列 2.1创建队列 2.2入队列 2.3判断是否为空 2.4出队列 2.5获取队头元素 2.6完整代码&#xff1a; 2.7双向链表模拟实现队列代码 3.数组模拟实现队列代码 3.1创建队列 3.2判断是否为满 3.3检查是否为空 3.4插入元素 3…
阅读更多...
静态路由 网络实验

静态路由 网络实验

静态路由 网络实验 拓扑图初步配置R1 ip 配置R2 ip 配置R3 ip 配置查看当前的路由表信息查看路由表信息配置静态路由测试 拓扑图 需求&#xff1a;实现 ip 192.168.1.1 到 192.168.2.1 的通信。 初步配置 R1 ip 配置 system-view sysname R1 undo info-center enable # 忽略…
阅读更多...
公开游戏、基于有向图的游戏

公开游戏、基于有向图的游戏

目录 〇&#xff0c;背景 一&#xff0c;公开游戏、策梅洛定理 1&#xff0c;公开游戏 2&#xff0c;策梅洛定理 二&#xff0c;有向图游戏 1&#xff0c;狭义有向图游戏 2&#xff0c;广义有向图游戏 3&#xff0c;狭义有向图游戏的SG数 4&#xff0c;Bash Game 力扣…
阅读更多...
在群晖上安装Nextcloud-AIO详解

在群晖上安装Nextcloud-AIO详解

本文是应网友 刘源 的要求折腾的&#xff1b; 什么是 Nextcloud AIO &#xff1f; Nextcloud AIO 就是 Nextcloud All-in-One &#xff0c;顾名思义就是一个 Nextcloud 的 All-in-One 版本&#xff0c;这是一个基于 Docker 的项目&#xff0c;它允许仅安装一个容器&#xff0c;…
阅读更多...
有哪些适合初学者的编程语言？

有哪些适合初学者的编程语言？

C语言 那为什么我还要教你C语言呢&#xff1f;因为我想要让你成为一个更好、更强大的程序员。如果你要变得更好&#xff0c;C语言是一个极佳的选择&#xff0c;其原因有二。首先&#xff0c;C语言缺乏任何现代的安全功能&#xff0c;这意味着你必须更为警惕&#xff0c;时刻了…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发