webpack常用配置

1.webpack概念

​ 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

2.webpack安装

1.webpack的依赖于node环境的，所以电脑必须有Node环境。

  • 没有node环境，请参考node官网
node -v  查看
npm -v 查看

在这里插入图片描述

2.安装webpack之前需要先安装一个npm的包管理的配置文件

npm init -y

3.安装webpack和webpack-cli

npm i webpack webpack-cli -d  (局部)
npm i webpack webpack-cli -g  (全局，不推荐)

在这里插入图片描述

3.webpack常用置项的作用

1）五个核心概念

  • Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  • Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
  • Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
  • Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  • Mode：模式，有生产模式production和开发模式development

4.webpack小demo

步骤1：

  • 根目录新建webpack.config.js文件
//获取当前的目录
const {resolve} = require('path');//node用法
module.exports ={//入口配置项entry:'./index.js',//出口项配置output:{filename:'built.js',path:resolve(__dirname,'build')},//设置为开发环境mode:'development',
}
  • 根目录新建index.js文件
  • 运行webpack之后，根目录出现build文件夹

步骤2:

  • 安装typescript环境npm i typescript -g，然后tsc -v查看版本号，并初始化typescript环境tsc --init

  • 将index.js文件改成index.ts并在根目录新建src文件里components文件夹新建一个组件并在index.ts文件引入并使用。

  • 运行webpack之后报错，因为我们没有指定好模块的解析方式，我们需要跟着官网文档使用resolve.extensions。webpack.config.js文件追加了

    • extensions: [‘.ts’, ‘…’]也可以，保留的默认的扩展
resolve: {extensions: ['.js', '.ts'],},
  • 根目录新建public文件创建index.html文件
  • npm i html-webpack-plugin并在webpack.config.js文件使用后
    • 作用：1.自动在内存中根据指定页面生成一个内存的页面
      2.自动把打包好的bundle.js追加到页面中去
const HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [new HtmlWebpackPlugin({template: "./public/index.html",filename: "index.html",}),],

步骤3: 配置webpack what5 + ts + react

  • npm i react react-dom @types/react @types/react-dom @babel/preset-react 安装依赖
    • react：react核心依赖
    • typescript：支持 ts
    • react-dom：负责处理web端的dom的渲染
    • @types/react ：react 类型声明文件，用于 tsx
    • @types/react-dom：react-dom 类型声明文件，用于 tsx
    • @babel/preset-react ：用于让 babel 可以转译 jsx 语法
    • @babel/preset-typescript：处理ts文件，原理是去掉ts的类型声明，然后再用其他 babel 插件进行编译
    • @babel/plugin-proposal-decorators 和@babel/plugin-proposal-class-properties：支持并编译decorator语法, 需要在tsconfig.ts中进行如下设置"experimentalDecorators": true
  • 入口文件改成.tsx结尾的
import React from 'react'
import ReactDom from 'react-dom'ReactDom.render(//这里react脚手架中引入的时app.js组件，这里直接写死了<h1>Hello React</h1>,document.getElementById("root")
)
  • 在tsconfig.json里面增加对tsx文件的支持"jsx": "react"
  • 运行webpack之后报错，要处理.tsx格式的执行，因为浏览器只能识别js文件，需要执行npm i ts-loader之后webpack.config.js增加module配置，修改resolve配置
module:{rules:[{test: /\.(js?|ts?|tsx?|jsx?)$/,use: [{loader: 'babel-loader',options: {// 开启babel的缓存cacheDirectory: true,presets: [['@babel/preset-env',{// useBuiltIns: usage 会根据配置的浏览器兼容，实现了按需添加useBuiltIns: 'usage',corejs: 3,// 不以commonjs打包，方便tree-shakingmodules: false,},],'@babel/preset-react','@babel/preset-typescript',],plugins: [['@babel/plugin-proposal-decorators', { legacy: true }],['@babel/plugin-proposal-class-properties'],],},},],},]},
resolve:{extensions:['.ts','.tsx','...']
},

步骤4：基本配置

  • 根目录新建

    1）.gitignore文件——总会有些文件无需纳入git的管理，也不希望它们出现在未跟踪文件列表，想忽略文件的作用

node_modules
**/node_modules
.DS_Store
doc/userName.md
/dist

​ 2）public文件夹存放项目的静态资源

​ 3）build文件夹存放webpack的配置文件

​ 4）src存放项目项目的代码文件

  • 在build文件里面新增三个文件webpack.common.js、webpack.dev.js、webpack.prod.js用于区分环境的配置，两个环境有够公共部分使用第三方工具webpack-merge将公共配置导入对应文件中，功能类似于 JavaScript 的 Object.assign()。

    // build/webpack.prod.js
const { merge } = require('webpack-merge')
const path = require('path')const common = require('./webpack.common')
const { PROJECT_PATH } = require('../constant')module.exports = merge(common, {mode: 'production',devtool: false,output: {filename: 'js/[name].[contenthash:8].js',path: path.resolve(PROJECT_PATH, './dist')},
})
    // build/webpack.dev.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common.js");
//获取当前的目录
const { resolve } = require("path"); //node用法
const PROJECT_PATH = resolve(__dirname, "../"); // 项目根路径
module.exports = merge(baseConfig, {mode: "development",output: {filename: "js/[name].js",path: resolve(__dirname, "dist"),},module: {rules: [{ test: /\.tsx$/, use: ["ts-loader"], exclude: /node_modules/ }],},
});

    • 哈希值区别

      hash：

      ​ 每次修改任何一个文件，所有文件名的hash至都将改变，所以一旦修改了任何一个文件，整个项目的文件缓存都将失效

      chunkHash：

      ​ 根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样，chunkHash不适用于同一chunk的文件，如一个js文件导入了一个css文件，他们属于同一个chunk，因此若只修改了js，最终打包出来的文件cs和js都会变成一个新的hash

      contenthash：

      ​ 根据文件内容生成hash值，不同文件的hash值一定不一样（只要文件内容不做修改，一定是同一个hash，有变动则会替换成另外的），这样就令浏览器只清楚掉变动文件的缓存（只有改动的文件重命名了）

  • npm i cross-env配置统一的Node环境变量

    • 在node中，全局变量 process 表示的是当前的node进程，process.env 包含着关于系统环境的信息。
使用 process.env.NODE_ENV获取当前环境"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server -- config build/webpack.dev.js","build": "cross-env NODE_ENV=production webpack -- config build/webpack.prod.js",
}

  • npm i webpack-dev-server提供本地服务参考链接

    • devServer的配置功能如下：

      historyApiFallback: 使用HTML5 History API时，index.html可能需要提供页面来代替任何404响应

      static: 该配置项允许配置从目录提供静态文件的选项（默认是 ‘public’ 文件夹）

      client: 允许在浏览器中设置日志级别，

      proxy: 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。

      host：服务ip

      port：服务端口

      stats：设为errors-only表示终端只打印错误类型的日志，不会打印warning以及其他信息影响阅读

      compress：设为true表示启用gzip压缩，加快网站打开速度

      open：设为true表示第一次启动项目时自动打开默认浏览器

      hot：设为true表示启用服务热替换配置

      clientLogLevel：设为none表示去除多余网页console信息

      …

      // build/webpack.dev.js 
devServer: {historyApiFallback: true,// noInfo: true,static: [{directory: path.join(__dirname, '../public'),// serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)// serveIndex: true,},],client: {overlay: {errors: true,warnings: false,},logging: 'error',progress: true,reconnect: 3,},hot: true,compress: true,// open: true, //在mac上为true才会打开浏览器，故在node启动文件又添加了openopen: {app: {name: 'google-chrome',arguments: ['--new-window'],},},proxy: {'/': {},},},

  • 为了实现js的热替换，此时需要在入口文件的执行代码最开始处配置一下 module.hot.accept 逻辑

    • ts报错安装第三方插件解决 npm i @types/webpack-env：包含 webpack 的 api 声明文件
    // index.tsx
if (module && module?.hot) {module?.hot.accept();
}

  • 进度条npm i webpackbar展示

    // build/webpack.common.js
const WebpackBar = require('webpackbar')
module.exports = {plugins: [new WebpackBar({name: 'Link Startou!!!', color: '#52c41a' }),]
}

  • 分别运行npm run dev和npm run build查看效果

步骤5:

  • 配置css——webpack支持原生js和html打包，需要下载第三方包并配置

    • npm i style-loader：将 js 文件中引入的 css 代码插入到 html 模板文件，使网页可以正常展示样式

    • npm i mini-css-extract-plugin：和 style-loader 功能一样，只是打包后会单独生成 css 文件而非直接写在 html 文件中，用于生产环境，开发环境不需要另外生成文件使用 style-loader 即可

    • npm i css-loader：令 js 可以通过 import 或者 require 等命令导入 css 代码

      • modules：开启 css module，看个人习惯，如果不使用可以直接置值 false，否则影响打包速度，localIdentName 表示自定义类名，为了确保类名全局统一加上哈希值
      • sourceMap：为 true 时会根据 devtool 映射css错误，生产环境不需要映射所有这里给的值是开发环境

    • 压缩优化css

      • npm i css-minimizer-webpack-plugin压缩生产环境打包后的css文件
        • optimization：在 webpack4 之后添加了 optimization 属性，专门用于存放优化打包的配置，minimizer属性存放一个数组，里可以存放用于代码压缩的插件，minimize 置 true 表示启用 minimizer 配置

    • 浏览器兼容问题

      • npm i postcss-loader：与 sass/less 不同，不是预处理器，相当于一个工具箱，可以使用它配合插件去转换css

      • npm i postcss-preset-env：将最新的 css 语法转换为目标环境的浏览器能够理解的语法，不用考虑浏览器兼容问题，以前需要配合 autoprefixer 第三方包自动补全前缀，现在新版本已经内置autoprefixer功能

      • 处理css的时候需要添加浏览器前缀插件的选择结合上面代码autoprefixer可为css添加浏览器前缀

        1）根目录新建.browserslistrc文件或者在package.json配置browserslist属性

      在这里插入图片描述

      ​ 2）配置 browserslist 字段会导致 webpack-dev-server 的热更新功能直接失效，为了避免这种情况需要给 webpack 配上 target 属性——webpack.dev.js中增加 target: ‘web’，webpack.prod.js中增加 target: ‘browserslist’

// package.json文件
{"browserslist": [ //注意是一个数组"last 1 version","> 1%","maintained node versions"]
}
//.browserslistrc文件
last 2 versions # 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
> 2% # 全球超过0.5%人使用的浏览器，可以通过 caniuse.com 查看不同浏览器不同版本占有率

// build/webpack.prod.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = merge(common, {// ...otheroptimization: {minimize: true,minimizer:[new CssMinimizerPlugin()]}
})

// build/webpack.common.js
const getCssLoaders = () => {const isDevelopment = process.env.NODE_ENV === 'development'const isProduction = process.env.NODE_ENV === 'production'const cssLoaders = [isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader, {loader: 'css-loader',options: {modules: {localIdentName: "[local]--[hash:base64:5]"},sourceMap: isDevelopment,}}]// 开发环境一般用chrom不会有问题，防止开发环境下看样式有一堆前缀影响查看，因此只在生产环境使用isProduction && cssLoaders.push({loader: 'postcss-loader',options: {postcssOptions: {plugins: [isProduction && ['postcss-preset-env',{//开启自动添加前缀功能，有些功能是默认关闭的，如栅格样式一些浏览器不支持所以默认关闭了，这里手动打开autoprefixer: {grid: true}}]]}}})return cssLoaders
}module: {rules: [{test: /\.css$/,use: [...getCssLoaders()]},
}
  • 预处理器
    • npm i less-loader将less文件编译成css文件，再做上述css文件的打包工作。
    • npm i less
// build/webpack.common.js
module: {rules: [{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
}

  • 打包图片资源及打包img标签中的图片

    • 方法1：npm i url-loader npm i file-loader 处理打包图片资源
    module: {rules: [{test: /\.(png|jpe?g|gif|webp)$/,// 要使用一个loader// 下载 url-loader file-loaderdependency: { not: ['url'] },use:[{ loader: 'url-loader',options: {// 图片大小小于8kb，就会被base64处理// 优点:减少请求数量（减轻服务器压力）// 缺点：图片体积会更大(文件请求速度更慢)limit: 8 * 1024,//  问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs// 解析时会出现问题：[object Module]// 解决:关闭url-loader的es6模块化，使用commonjs解析esModule:false,// 给图片进行重命名// [hash:10]取图片的hash前10位// [ext]取文件原来拓展名name:'[hash:10].[ext]'},}],type: 'javascript/auto'},{test: /\.html$/,// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）loader: 'html-loader',}
}
    • 方法2：webpack新方法资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
      • 四种新的模块类型
        • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
        • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
        • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
        • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
    // build/webpack.prod.js
//在output中统一Asset Module 输出路径
output: {publicPath: '/',filename: 'js/[name].[contenthash:8].js',path: pathResolve('../dist'),assetModuleFilename: 'images/[name].[contenthash:8].[ext]',},// build/webpack.common.js
module: {rules: [{// 处理图片资源  webpack5图片新打包方法test: /\.(png|jpe?g|gif|webp)$/,// webpack5中使用assets-module（url-loader已废弃）type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024,// 小于10kb的图片会被base64处理}},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: "static/imgs/[hash:8][ext][query]",publicPath: './'}},{test: /\.html	$/,// 处理html文件的img图片（负责引入img，从而能被url-loader处理）// webpack5中使用 html-withimg-loader代替loader: 'html-loader'loader: 'html-withimg-loader'}
}

  • 打包统一字体

    • 资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。
// build/webpack.common.jsmodule: {rules: [{// 加载字体图标test: /\.(eot|ttf|svg|woff)$/,type: "asset/resource",generator: {// 输出到 font 目录中，占位符 [name] 保留原始文件名，// [hash] 防止出现相同文件名无法区分，[ext] 拿到后缀名filename: "font/[name].[hash:6][ext]",},},],},

步骤6

  • css压缩
    • npm install mini-css-extract-plugin --save-dev npm install css-minimizer-webpack-plugin --save-dev
// build/webpack.common.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {optimization: {minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释// `...`,new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};
  • js压缩
    • terser-webpack-plugin：用去去除生产环境的无用js代码，webpack5 之后自带，不需要另行安装，直接引入使用即可
      • extractComments：设为 false 表示去除所有注释，除了有特殊标志的注释如 @preserve 标记
      • pure_funcs：去除函数，如上述配置的意思是将所有 console.log 函数去除
// build/webpack.prod.js
const TerserPlugin = require("terser-webpack-plugin")module.exports = merge(common, {optimization: {minimize: true,minimizer:[new TerserPlugin({extractComments: false,terserOptions: {compress: { pure_funcs: ['console.log'] },}}),]}
})
  • 清除打包数据
    • clean-webpack-plugin：清除上一次打包的 dist 目录内容，防止文件残留
// build/webpack.common.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {...plugins: [...new CleanWebpackPlugin(),],
}

  • 缓存机制——大大增快二次编译速度，webpack5 已内置该功能【cache机制及配置参考】

    • cache.type：缓存类型，值为 memory 或 filesystem，分别代表基于内存的临时缓存，以及基于文件系统的持久化缓存

      cache.buildDependencies：全局缓存失效的一种机制，配置 {config: [__filename]}，表示当配置文件内容或配置文件依赖的模块文件发生变化时，当前的构建缓存即失效

// build/webpack.common.js
module.exports = {cache: {type: 'filesystem',buildDependencies: {config: [__filename],},},
}
  • 代码分割——当使用懒加载写法时，webpack自动会对代码进行分割成不同的chunk
    • 浏览器缓存可缩短网页交互时间
    • 降低首屏时间
// 在react中比较常见的是React.lazy
const MyComponent = React.lazy(() => import('Components/MyComponent'))

将第三方依赖打包独立chunk，需要在webpack额外进行配置

​ splitChunks：代码分割相关配置

​ splitChunks.chunks：选择哪些内容进行优化，如果为 all 时表示即使同步和异步的代码也可以共享thunk

​ minSize：生成chunk的最小大小（以字节为单位）

// build/webpack.dev.js
module.exports = merge(common, {optimization: {minimize: false,minimizer: [],splitChunks: {chunks: 'all',minSize: 0,},},
})

// build/webpack.prod.js
module.exports = merge(common, {optimization: {// ...othersplitChunks: {chunks: 'all',minSize: 0,},}
})

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

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

相关文章

IDEA远程服务器开发

IDEA远程服务器开发

IDEA的远程开发是在本地去操远程服务器上的代码&#xff0c;可以直接将本地代码的编译,构建,调试,运行等工作都放在远程服务器上而本地运行一个客户端远程去操作服务器上的代码,就如同我们平常写代码一样。相比于云桌面成本更低,开发效率更高。 1.首先服务器配置jdk&#xff0…
阅读更多...
win10通过ssh链接deepin23并开启x11转发

win10通过ssh链接deepin23并开启x11转发

前提 主机环境&#xff1a;win10 lstc 虚拟机环境&#xff1a;deepin23beta2 终端&#xff1a;tabby x11服务器: vcxsrv 安装ssh sudo apt install ssh开启root登录(看你需求&#xff09; 首先你要给root账号设置密码 sudo passwd root修改配置文件 sudo vim /etc/ssh/ss…
阅读更多...
gitee仓库使用中的警告

gitee仓库使用中的警告

当 Git 执行 git pull 命令时&#xff0c;有时候会出现类似下面的警告信息&#xff1a; warning: ----------------- SECURITY WARNING ---------------- warning: | TLS certificate verification has been disabled! | warning: ------------------------------------------…
阅读更多...
ASP.NET Core WebAPI从HTTPS调整为HTTP启动

ASP.NET Core WebAPI从HTTPS调整为HTTP启动

使用VS2022创建WebAPI项目时&#xff0c;默认勾选“配置HTTPS(H)”&#xff0c;这样启动WebAPI时以https方式启动。   如果要从HTTPS调整为HTTP启动&#xff0c;需要修改项目中以下几处&#xff0c;首先是Program.cs中删除app.UseHttpsRedirection()语句&#xff0c;删除后…
阅读更多...
数据结构与算法：复杂度

数据结构与算法：复杂度

友友们大家好啊&#xff0c;今天开始正式学习数据结构与算法有关内容&#xff0c;后续不断更新数据结构有关知识内容&#xff0c;希望多多支持&#xff01; 数据结构&#xff1a; 数据结构是用于存储和组织数据的方式&#xff0c;以便可以有效地访问和修改数据。不同的数据结构…
阅读更多...
E5071C 是德科技网络分析仪

E5071C 是德科技网络分析仪

181/2461/8938产品概述&#xff1a; E5071C ENA 矢量网络分析仪&#xff0c;9 kHz 至 20 GHz&#xff0c;配有增强型 TDR 测量选件。 E5071C 是大规模无源元器件测试的理想解决方案。 它具有出色的测量性能&#xff0c;有助于提高测试吞吐量&#xff0c;尤其是与 E5092A 多端…
阅读更多...
REVIT二次开发万能刷

REVIT二次开发万能刷

将这两个参数赋予其他参数 步骤2 将来做个可以调控的版本 using System; using System.Collections.Generic; using System.Lin
阅读更多...
C动态内存那些事

C动态内存那些事

为什么存在动态内存分配&#xff1f; 首先&#xff0c;动态内存分配是计算机中一种重要的内存管理方法&#xff0c;它主要解决了静态内存分配无法灵活应对变化需求的问题。以下是几个存在动态内存分配的原因&#xff1a; 灵活性&#xff1a;动态内存分配允许程序在运行时根据需…
阅读更多...
Allure 内置特性

Allure 内置特性

章节目录&#xff1a; 一、内置特性概述二、展示环境信息三、测试结果分类四、用例步骤说明五、添加附件六、添加用例描述七、设置动态的用例标题八、报告中添加链接九、组织测试结果9.1 使用与理解9.2 指定运行 十、划分用例级别十一、动态生成附加信息十二、清空历史报告记录…
阅读更多...
【GitHub项目推荐--如何构建项目】【转载】

【GitHub项目推荐--如何构建项目】【转载】

这是一个 138K Star 的开源项目&#xff0c;这个仓库汇集了诸多优质资源&#xff0c;教你如何构建一些属于自己的东西&#xff0c;内容主要分为增强现实、区块链、机器人、编辑器、命令行工具、神经网络、操作系统等几大类别。 开源地址&#xff1a;https://github.com/danist…
阅读更多...
vue 样式隔离原理

vue 样式隔离原理

日常写单文件组件时&#xff0c;会在style添加scoped属性&#xff0c;如<style scoped>&#xff0c;目的是为了隔离组件与组件之间的样式&#xff0c;如下面的例子&#xff1a; <template><p class"foo">这是foo</p><p class"bar&q…
阅读更多...
ubuntu下docker卸载和重新安装

ubuntu下docker卸载和重新安装

卸载&#xff1a;步骤一&#xff1a;停止Docker服务 首先&#xff0c;我们需要停止正在运行的Docker服务。打开终端&#xff0c;执行以下命令&#xff1a; sudo systemctl stop docker 步骤二&#xff1a;删除Docker安装包 接下来&#xff0c;我们需要删除已经安装的Docker软件…
阅读更多...
微信小程序如何自定义单选和多选

微信小程序如何自定义单选和多选

实现单选 实现效果：点击显示单选状态，每次仅能点击一个元素。 实现方式： wxml： <view wx:for="{{item_list}}" data-info="{{index}}" class="{{menu_index===index?choose:no_choose}}" bind:tap="changeColor">{{ite…
阅读更多...
25考研每日的时间安排

25考研每日的时间安排

今天要给大家分享一下25考研每日的时间安排。 没有完美的计划&#xff0c;只有合适的计划。 仅供参考 很多人说复习不要只看时长而是要看效率&#xff0c;所以学多长时间不重要&#xff0c;重要的高效率完成任务。 完美的计划 这个计划看起来很完美&#xff0c;从早到晚有学习…
阅读更多...
尚无忧球馆助教系统源码，助教小程序源码，助教源码，陪练系统源码

尚无忧球馆助教系统源码，助教小程序源码，助教源码，陪练系统源码

特色功能&#xff1a; 不同助教服务类型选择 助教申请&#xff0c;接单&#xff0c;陪练师入住&#xff0c;赚取外快 线下场馆入住 设置自己服务 城市代理 分销商入住 优惠券 技术栈&#xff1a;前端uniapp后端thinkphp 独立全开源
阅读更多...
【C++基础】析构函数和构造函数面试知识点总结

【C++基础】析构函数和构造函数面试知识点总结

&#x1f308;欢迎来到C基础专栏 &#x1f64b;&#x1f3fe;‍♀️作者介绍&#xff1a;前PLA队员 目前是一名普通本科大三的软件工程专业学生 &#x1f30f;IP坐标&#xff1a;湖北武汉 &#x1f349; 目前技术栈&#xff1a;C/C、Linux系统编程、计算机网络、数据结构、Mysq…
阅读更多...
大脑的漏洞：你是如何走向狭隘和顽固的？

大脑的漏洞：你是如何走向狭隘和顽固的？

在这篇文章的最开始&#xff0c;我想请大家思考一个问题&#xff1a; 为什么谣言的传播总是非常容易&#xff0c;但辟谣却一点也不容易呢&#xff1f; 有一个非常简单的答案&#xff0c;你或许立刻就能想到&#xff1a;因为谣言一般都非常简单&#xff0c;但辟谣一般都不怎么简…
阅读更多...
linux安装docker--更具官网教程

linux安装docker--更具官网教程

1.访问https://docs.docker.com/ 2.进入download 3输入cento 或者直接访问地址Install Docker Engine on CentOS | Docker Docs 4一步一步根据官网命令走 2安装 3 4 方式一&#xff1a; service docker start&#xff08;开启&#xff09; service docker status&#xff08…
阅读更多...
如何使用 NFTScan API 检索 NFT 合约地址下 Transactions 数据

如何使用 NFTScan API 检索 NFT 合约地址下 Transactions 数据

对于大多数人而言&#xff0c;获取某 NFT 合约地址下的全量交易记录是十分有挑战性的&#xff0c;不仅涉及到对区块链技术的深入了解以及使用相应的工具和资源&#xff0c;还需要处理区块链上的智能合约和交易数据&#xff0c;并将其与外部数据源进行整合分析。通常&#xff0c…
阅读更多...
简单介绍----微服务和Spring Cloud

简单介绍----微服务和Spring Cloud

微服务和SpringCloud 1.什么是微服务&#xff1f; 微服务是将一个大型的、单一的应用程序拆分成多个小型服务&#xff0c;每个服务负责实现特定的业务功能&#xff0c;并且可以通过网络通信与其他服务通信。微服务的优点是开发更灵活&#xff08;不同的微服务可以使用不同的开…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023