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-shaking
                                        modules: 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启动文件又添加了open
              open: {
                  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, {
  // ...other
  optimization: {
    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-loader
            dependency: { 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.js
 module: {
    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: {
	// ...other
    splitChunks: {
      chunks: 'all',
      minSize: 0,
    },
  }
})

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kruise Rollout 全链路灰度实践

作者&#xff1a;旦酱、十眠 什么是全链路灰度&#xff1f; 在发布应用的过程中&#xff0c;我们通常希望用少量特定流量来验证新版本的发布是否正常&#xff0c;以保障整体稳定性。这个过程被称为灰度发布。关于灰度发布&#xff0c;我们通过逐步增加发布的范围&#xff0c;…

如何快速解决局域网IP冲突问题?连接IP地址冲突如何用代理IP搞定?

随着互联网的普及&#xff0c;局域网已经成为了许多家庭和企业中不可或缺的一部分。然而&#xff0c;局域网中的IP地址冲突问题却时常困扰着用户。一旦出现IP地址冲突&#xff0c;网络连接就会变得不稳定&#xff0c;甚至无法正常上网。那么&#xff0c;如何快速解决局域网IP冲…

《Linux系列》Linux虚拟机,LVM逻辑卷扩容,xfs文件系统扩容

Linux虚拟机&#xff0c;LVM逻辑卷扩容&#xff0c;xfs文件系统扩容 1 虚拟机配置介绍 在创建虚拟机的时候只给了20G磁盘空间大小&#xff0c;但是现在需求变更&#xff0c;想要增加到40G磁盘空间大小&#xff0c;所以需要通过两步扩容磁盘空间。 系统版本是Centos7 根目录…

掼蛋功能之识别性格篇

常说&#xff1a;千人千面。大多数人一到牌局的场面&#xff0c;往往精神便会放松&#xff0c;面貌神情不再收敛&#xff0c;一言一行体现出的性格暴露无疑&#xff0c;具体表现为以下几种&#xff1a; 1、浮躁冲动型&#xff1a;此类人多数不讲究团队配合&#xff0c;自顾自出…

了解云工作负载保护:技术和最佳实践

云工作负载是指云环境中的应用程序或存储元素&#xff0c;无论是公共云、私有云还是混合云。每个云工作负载都使用云的资源&#xff0c;包括计算、网络和存储。 云工作负载可以多种多样&#xff0c;例如运行应用程序、数据库或托管网站。它们可以是静态的或动态的&#xff0c;…

数据的跃动之美:探索ECharts动态排序柱状图的魔力

前言 在 echarts 中&#xff0c;动态排序柱状图是一种常用图表&#xff0c;可以帮助我们更好地理解数据的变化和排序规律。本文将介绍如何使用 echarts 库创建动态排序柱状图&#xff0c;以展示数据的变化趋势和排序情况。 完整代码 <template><div class"acros…

Java 数据结构集合

文章目录 Java 数据结构1. 基本数据结构1.1 数组 (Array)1.2 链表 (Linked List)1.3 栈 (Stack)1.4 队列 (Queue)双向队列优先级队列 2. 树形数据结构2.1 二叉树 (Binary Tree)2.2 堆 (Heap) 3. 散列数据结构3.1 哈希表 (Hash Map)3.2 LinkedHashMap3.3 TreeMapConcurrentHashM…

Cesium for Unity包无法加载

太上老君急急如律⚡令⚡ &#x1f959;关闭UnityHub&#x1f9c0;启动梯子&#x1f96a;cmd 启动UnityHub &#x1f959;关闭UnityHub &#x1f9c0;启动梯子 &#x1f96a;cmd 启动UnityHub 把批处理启动文件&#x1f448;中的exe的路径换成自己的安装目录&#xff01;保存…

[完美解决]Vue/React项目运行时出现this[kHandle] = new _Hash(algorithm, xofLen)

问题出现的原因 出现这个问题是node.js 的版本问题&#xff0c;因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制&#xff0c;可能会对生态系统造成一些影响。故此以前的项目在使用 nodejs V17以上版本后会报错。而github项目…

redis报错:WRONGTYPE Operation against a key holding the wrong kind of value

这个是在redis存取的数据时&#xff0c;存数据时的数据类型和取数据时的数据类型不一致导致的 原因分析 首先需要明白的是&#xff0c;出现这种错误的原因是因为我们在取值的时候&#xff0c;使用的命令不对&#xff0c;比如你用获取string类型的get命令去取列表list类…

【AI视野·今日Robot 机器人论文速览 第七十五期】Thu, 11 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Thu, 11 Jan 2024 Totally 16 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Analytical Model and Experimental Testing of the SoftFoot: an Adaptive Robot Foot for Walking over Obstacles and Irre…

山体滑坡在线监测预警系统解决方案

一、方案概述 我国是一个山区面积较大的国家&#xff0c;山地、丘陵约占国土总面积的2/3&#xff0c;在众多的山区中&#xff0c;都具备泥石流形成的基本条件&#xff0c;这也让我国成为受山体滑坡泥石流灾害影响最大的国家。山体滑坡是指山体斜坡上某一部分岩土在重力(包括岩土…

【C/C++】C/C++编程——C++ 开发环境搭建

C的开发环境种类繁多&#xff0c;以下是一些常见的C 集成开发环境&#xff1a; AppCode &#xff1a;构建与JetBrains’ IntelliJ IDEA 平台上的用于Objective-C&#xff0c;C,C&#xff0c;Java和Java开发的集成开发环境CLion&#xff1a;来自JetBrains的跨平台的C/C的集成开…

肺癌相关文献6

第十四篇 Classification of lung adenocarcinoma based on stemness scores in bulk and single cell transcriptomes IF&#xff1a;6.0 中科院分区:2区 生物学WOS分区&#xff1a;Q1被引次数&#xff1a; 4 背景&#xff1a;癌细胞具有无限期自我更新和增殖的能力[2]。在一…

解决撸卡、撸货、采退成功率低的原因和方法

在亚马逊和沃尔玛等平台上&#xff0c;不论是进行测评、撸卡还是撸货&#xff0c;确保环境的安全性和稳定性是首要任务。一个稳定的环境是进行这些项目的基础&#xff0c;如果无法解决安全性问题&#xff0c;那么进行这些项目就毫无意义。我们团队经过八、九年的环境技术研发&a…

解锁无限可能,Roxlabs代理引领未来网络新体验

文章目录 前言网络隐匿利器&#xff1a;IP代理什么是Roxlabs&#xff1f;世界百花争艳&#xff0c;我独爱一枝什么是住宅IP&#xff1f;如何选择代理类型 利用IP代理进行国外数据采集实战教学附赠一个利用代理IP实现赚钱的方法总结 前言 在数字时代的今天&#xff0c;我们对于…

ai智能写作软件有分享吗?分享4款解放双手的软件!

随着人工智能技术的不断发展&#xff0c;AI智能写作软件逐渐成为内容创作者们的新宠。这些软件不仅能够帮助我们快速生成高质量的文本内容&#xff0c;还能在优化搜索引擎排名等方面发挥重要作用。本文将为大家介绍几款常用的AI智能写作软件&#xff0c;让您轻松提升内容创作效…

香港云服务器:如何计算其正常运行时间

​  在中国香港云服务器使用中&#xff0c;有心的小伙伴应该会有留意到服务商对其“正常运行时间”的描述。简单来说&#xff0c;正常运行时间是指网站或在线服务保持正常状态并可供用户使用而不会中断或中断的时间。正常运行时间通常以百分比表示&#xff0c;显示服务器在线…

【GitHub项目推荐--不错的 Java 开源项目】【转载】

1 基于 Java 的沙盒塔防游戏 Mindustry 是一款用 Java 编写的沙盒塔防游戏。玩家需要建造精密的传送带供应链&#xff0c;提供炮塔弹药&#xff0c;生产建筑材料&#xff0c;保护建筑并抵御敌人。也可以在跨平台多人合作游戏中与朋友一起战斗&#xff0c;或组队进行 PVP 比赛。…

【EI会议征稿通知】第五届机械仪表与自动化国际学术会议(ICMIA 2024)

第五届机械仪表与自动化国际学术会议&#xff08;ICMIA 2024&#xff09; The 5th International Conference on Mechanical Instrumentation and Automation 2024年第五届机械仪表与自动化国际学术会议&#xff08;ICMIA 2024&#xff09;定于2024年4月5-7日在中国武汉隆重…