webpack使用

news2024/12/23 23:57:43

一、简介

概述

本次使用webpack4进行构建打包

二、webpack

安装webpack、webpack-cli

npm install webpack@4.2.0 webpack-cli@4.2.0 -D

三、loader

加载器概述

  • raw-loader：加载文件原始内容（utf-8）

  • file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件

  • url-loader:和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中

  • source-map-loader:加载额外的Source Map文件，以方便断点调试

  • svg-inline-loader：将压缩后的 SVG 内容注入代码中

  • image-loader：加载并且压缩图片文件

  • handlebars-loader: 将 Handlebars 模版编译成函数并返回

  • babel-loader：把ES6转化成ES5

    let----降级---->plugin

    箭头函数----降级—>plugin

  • ts-loader: 将 TypeScript 转换成 JavaScript

  • awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader

  • css-loader：加载css，支持模块化、压缩、文件导入等特性，帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css；

  • style-loader：把css代码注入到js中，通过DOM操作去加载css

  • eslint-loader：通过ESLint检查JS代码

  • tslint-loader：通过 TSLint检查 TypeScript 代码

  • postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀

  • vue-loader：加载 Vue.js 单文件组件，它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

  • cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

1.安装sass加载器和模块

其实之所以用到node-sass、是因为sass-loader的缘故。sass-loader 是将sass文件编译成css，而sass-loader又依赖于node-sass，所以需要安装node-sass

npm install node-sass sass-loader -D
2.安装css加载器和安装style加载器

大概流程是，css loader将css包裹成js, 传给style loader 然后style loader再将它处理成一个立即执行函数封装到bundle中. 这个立即执行函数会生成一个style标签嵌入到HTML页面中

  • css-loader：加载css，支持模块化、压缩、文件导入等特性

  • style-loader：把css代码注入到js中，通过DOM操作去加载css

npm install css-loader  style-loader -D
npm install style-loader -D
3.安装ts加载器

将 TypeScript 转换成 JavaScript

npm install ts-loader -D
4.安装vue加载器

它可以解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

npm install vue-loader@15.10.1 -D
5.安装babel加载器

能够把es6高级内容变为es5，es6/es7/es8等等高级标准有很多(let、箭头函数、对象解构赋值、…展开运算符、反勾号字符串等等)，每个标准都需要一个独立的plugin进行降级处理，如果使用许多高级标准内容，那么势必要为此安装许多plugin，这样工作比较繁琐，系统已经考虑到这点了，其通过preset把许多常用的plugin给做了集合，因此一般性的使用只需要安装preset即可搞定(如果项目应用到了一个生僻的高级标准内容，preset处理不来，就还需要再安装对应的plugin处理)

npm i babel-loader @babel/core @babel/preset-env -D 
{
    test: /.js$/,
        exclude: /node_modules/,  // 排除目录
        use: [
                {
                    loader:'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
        ]  // es6转es5
} 
​

说明： @babel/preset-env用来指定按什么样的预设来进行降级处理

  1. 打包测试 打包之后，去打包后的文件中检查是否已经把const和箭头函数这种es6的代码转成了es5的代码。

6.PostCSS

  • PostCSS是一个通过JavaScript来转成样式的工具

  • 这个工具可以帮助我们进行一些css的转化和适配，比如自动添加浏览前缀，css样式的重置

PostCSS内部也是通过各种插件来实现转化的，所以需要安装各种插件来使用

npm install postcss-loader -D
npm install autoprefixer -D   //需要安装插件，添加浏览器前缀的
module: {
    rules: [
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: 'postcss-loader',
                options: {
                    //可以提出一个单独的文件
                    postcssOptions: {
                        plugins: [
                            require('autoprefixer')
                        ]
                    }
                }
            }]
        }
    ]
}

当使用postcss-loader的时候，会先查找有不有自己options选项，如果没有就去查找postcss.config.js这个配置文件

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

webpack.config.js

{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader']
}

postcss-preset-env

一个比较强大的postcss插件

它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill；

也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）

安装：

npm install postcss-preset-env -D

使用:

跟autoprefixer使用是一样的，可以直接用postcss-preset-env替换autoprefixer

效果也是一样的

7. file-loader

file-loader的作用就是帮助我们处理import / require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中

在使用图片有两种形式，一种是背景图片，另外一种是img标签

//简单创建一个img标签

import image from '../imgs/mode.png'

const el = document.createElement('img')

el.src = image

document.body.appendChild(el)

注意：当使用img标签的时候，我们把图片看成是一个模块，不要直接写成是一个字符串

安装

npm install file-loader -D

使用

//webpack.config.js

module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'
                }
            ]
        }
    ]
}

上面的配置，可以直接展示出图片来了，也就说明加载成功了。

但是还是存在一种不是很友好的现象

打包过后的文件，就直接存在build文件夹中，如果是一张图片还好，如果有很多张图片，就会造成打包文件夹的结构混乱。图片被打包的文件名是32位hash值，我们不能分辨哪张是对应的哪张图片。所以需要进行处理。

所以需要对file-loader进行options配置

常见的配置：
[ext] 处理文件的扩展名
[name] 处理文件的名字
[hash：] 截取hash的长度，默认的32个字符太长了
[path] 文件相对于webpack配置文件的路径
//重新对file-loader进行配置
module: {
    rules: [
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                {
                    loader: 'file-loader'，
                    options: {
                        //在打包的文件夹中创建一个images文件夹，用来保存图片的
                        outputPath: 'images',
                        //给图片取名字
                        name: "[name]_[hash:8].[ext]"
                       }
                }
            ]
        }
    ]
}

效果图：

8.url-loader

url-loader跟file-loader的工作原理是一样的

url-loader的区别： 就是对图片有限制，对图片较小的进行base64编码

所以会发现，打包过后的文件，就一个build.js，而且里面都还是base64

这也不是我们想要的，只对限制一下的图片，进行base64的转换。

为什么呢？

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

小于100kb的图片，进行转化

{
    test: /\.(jpe?g|png|gif|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    //在打包的文件夹中创建一个images文件夹，用来保存图片的
                    outputPath: 'images',
                    //给图片取名字
                    name: "[name]_[hash:8].[ext]",
                    //配置limit
                    limit: 100 * 1024
                }
            }
        ]
}
9.加载数据（CSV/TSV/XML）

除了js，json，images, 可以加载的有用数据还有CSV/TSV/XML，要导入CSV, TSV和XML，可以

使用csv-loader和xml-loader

安装插件：

npm i csv-loader xml-loader -D
module.exports = {
  ...
  module: {
    rules: [
     {
        test: /\.(csv|tsv)$/,
        use: 'csv-loader'
      },
 
      {
        test: /\.xml$/,
        use: 'xml-loader'
      }
    ]
  }
}

四、插件(Plugin)

1.webpack-dev-server

项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件,现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果

npm i webpack-dev-server  -D

在webpack.config.js中做如下配置

module.exports = {
    // 其他省略....
  
    // 配置 webpack-dev-server的选项
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    }
}

在package.json中补充一个script

"scripts": {
+    "dev": "webpack-dev-server",  
   // 它默认会找webpack.config.js文件
   
   "build": "webpack-dev-server --config  webpack.config.js" 
    // 指定使用webpack.config.js配置文件文件
},

  1. 启动命令 现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。

  2. 测试

    • 修改.js代码，

    • 修改.css代码，检查是否会重启

2.HtmlWebpackPlugin
npm i html-webpack-plugin -D
const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={
 
    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
        }) ,
    ]  
}

上述的这个如果需要在index中假如一些自动以的内容是根据development与production不同，而添加不同的内容。在这里html-webpack-plugin插件已经帮助我们做好了这部分。在你需要打包是自动需要假如的内容 使用

  <%= htmlWebpackPlugin.options.urlScript %>

要说明的是urlScript 这个是我们自己定义的，你可以叫任何的名字,在传入的时候使用这个变量放入插件的内置中

const path = require('path'); 
const  HtmlWebpackPlugin =  require('html-webpack-plugin');
module.exports={
 
    plugins:[
        new HtmlWebpackPlugin({//设置模板文件
              template:'./src/index.html',//使用打包后的模板文件
              filename:'index.html'//打包后文件的名字
              urlScript:'<script src="./js/zepto.min.js"></script> '//---<<---就这里
        }) ,
    ]  
}

未经过html转换的文件

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
<head>
<body> 
</body>
  <%= htmlWebpackPlugin.options.urlScript %>
</html>

经过 html-webpack-plugin 的转换之后就会变成

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
<head>
<body> 
</body>
  <script src="./js/zepto.min.js"></script>  -->>之前的标间就被替换成为了 我们之前的插件设置的内容了，这个很有用
</html>
3.VueLoaderPlugin

作用是 对本次webpack编译的所有rules做操作，添加pitch-loader和vue-loader，进行一个顺序的重新排放，

最终rule中的顺序是这样的: [ pitch-loader, … … , vue-loader] (pitcher在在开始，vue-loader在最后，这一切是通过把...clonedrule放到中间来实现的）

（ * pitchloader的resourceQuery函数表明了，这个loader只会对request中带有vue字段query的request使用pitchloader）

4. process
 npm i --save-dev process
5.抽离css为单独的文件

安装抽离css为单独文件的插件：该插件基于webpack5构成，主要是把style标签引入css转化为link

引入css

安装插件：

npm i mini-css-extract-plugin -D

配置：

// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 module.exports = {
  ...
  plugins: [
    new MiniCssExtractPlugin({
        // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],
  module: {
    rules: [
      // 处理后缀名为.css或者是.less的文件
  {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

五、CSS优化(压缩)

安装插件：

npm i css-minimizer-webpack-plugin -D

配置：

/ 引入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 
module.exports = {
  ...
  // 优化配置项
  optimization: {
    minimizer: [
      // 使用插件优化 css 代码
      new CssMinimizerPlugin()
    ],
  },
  // 模式，因为压缩css代码只在生产模式下生效
  mode: 'production'
}

六、字体资源

通过 CSS 引入字体资源

@font-face {
  font-family: 'PujiSansExpandedHeavy';
  src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
 }

配置：

module.exports = {
  ...
  module: {
    rules: [
     // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      }
    ]
  }
}

Node API 方式

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

在使用 Node API 时，还可以通过配置中的 plugins 属性传入插件。

some-node-script.js

const webpack = require('webpack'); // 访问 webpack 运行时(runtime)
const configuration = require('./webpack.config.js');

let compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run(function (err, stats) {
  // ...
});

webpack打包成的dist启动运行

安装express-generator生成器

npm install express-generator -g

创建一个express项目 执行express expressDemo（expressDemo是项目名）

expressDemo项目目录如下图：

进入expressDemo目录，安装项目依赖 执行npm install

把dist目录下的所有文件复制到express项目的public文件夹下

运行npm start启动expressDemo项目，打开浏览器，输入http://localhost:3000即可访问。

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

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

相关文章

【深度学习】（4）--卷积神经网络

【深度学习】（4）--卷积神经网络

文章目录 卷积神经网络一、画面不变性二、图像识别三、卷积网络结构1. 原理2. 卷积层3. 池化层4. 全连接层 四、感受野 总结 卷积神经网络 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;简称CNN&#xff09;是一种深度学习模型&#xff0c;特别适用于处理…
阅读更多...
探索 Snowflake 与 Databend 的云原生数仓技术与应用实践 | Data Infra NO.21 回顾

探索 Snowflake 与 Databend 的云原生数仓技术与应用实践 | Data Infra NO.21 回顾

上周六&#xff0c;第二十一期「Data Infra 研究社」在线上与大家相见。活动邀请到了西门子数据分析师陈砚林与 Databend 联合创始人王吟&#xff0c;为我们带来了一场关于 Snowflake 和 Databend 的技术探索。Snowflake&#xff0c;这个市值曾超过 700 亿美元的云原生数据仓库…
阅读更多...
20240926 关于Goland处理wsl-GOROOT原理猜测

20240926 关于Goland处理wsl-GOROOT原理猜测

GOROOT的原理 go sdk与java jdk类似&#xff0c;是go的编译工具链的集合。 在windows上&#xff0c;我们通过在系统环境变量中添加GOROOT并设置为go sdk地址&#xff0c;使得命令行可以访问到go sdk并执行go test、build等命令&#xff0c;这样设置的变量是全局生效的&#x…
阅读更多...
zico2打靶记录

zico2打靶记录

一、环境搭建 下载地址&#xff1a;https://download.vulnhub.com/zico/zico2.ova 直接双击下载的.ova文件即可在VMware中打开 设置好保存路径后在虚拟机的设置中删除仅主机这个网卡 然后启动靶机 二、信息收集 扫描靶机ip arp-scan -l 扫描一下开放的端口 nmap -p- -sV…
阅读更多...
C++面向对象基础

C++面向对象基础

目录 一.函数 1.内联函数 2.函数重载 3.哑元函数 二.类和对象 2.1 类的定义 2.2 创建对象 三. 封装&#xff08;重点&#xff09; 四. 构造函数 constructor&#xff08;重点&#xff09; 4.1 基础使用 4.2 构造初始化列表 4.3 构造函数的调用方式&#xff08;掌握…
阅读更多...
如何守护变美神器安全？红外热像仪：放开那根美发棒让我来！

如何守护变美神器安全？红外热像仪：放开那根美发棒让我来！

随着智能家电市场的迅速发展&#xff0c;制造商们越来越关注生产过程中效率和质量的提升。如何守护变美神器安全&#xff1f;红外热像仪&#xff1a;放开那根卷发棒让我来&#xff01; 美发棒生产遇到什么困境&#xff1f; 美发棒生产过程中会出现设备加热不均情况&#xff0c…
阅读更多...
【pytorch】pytorch入门4：神经网络的卷积层

【pytorch】pytorch入门4：神经网络的卷积层

文章目录 前言一、定义概念 缩写二、性质三、代码总结参考文献 前言 使用 B站小土堆课程的笔记 一、定义概念 缩写 卷积层是神经网络中用于突出特征来进行分类任务的层。 二、性质 卷积核例子&#xff1a;vgg16 model 三、代码 添加库 python代码块import os import …
阅读更多...
无线领夹麦克风哪个牌子好，2024年新款领夹麦克风推荐

无线领夹麦克风哪个牌子好，2024年新款领夹麦克风推荐

在短视频和直播风靡的当下&#xff0c;音频质量成为了衡量内容品质的重要标尺。市面上琳琅满目的无线领夹麦克风产品&#xff0c;却让许多创作者陷入了选择困难中&#xff0c;高昂的价格、复杂的操作、以及参差不齐的音质表现&#xff0c;让不少人在追求专业音频的道路上交了“…
阅读更多...
Excel中用位置筛选解法

Excel中用位置筛选解法

有 2022 年 1 月的日销售额统计表如下所示&#xff1a; 筛选出偶数日的销售额&#xff1a; spl("E(?1).select(#%20)",A1:B32)#表示当前行号 免费课程、软件免费下载
阅读更多...
智慧公厕：引领公共卫生新潮流@卓振思众

智慧公厕：引领公共卫生新潮流@卓振思众

随着科技的不断进步&#xff0c;智慧公厕应运而生&#xff0c;为人们带来了全新的如厕体验。作为智慧公厕厂家&#xff0c;我们致力于打造更加舒适、便捷、环保的公共厕所。智慧公厕究竟有哪些神奇之处呢&#xff1f;让我们一起来揭开它的神秘面纱。【卓振思众】 一、环境监测&…
阅读更多...
基于SpringBoot + Vue的轿车数字化管理系统

基于SpringBoot + Vue的轿车数字化管理系统

文章目录 前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S 四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论 五、项目代码参考六、数据库代码参考七、项目论文示例结语 前言 &#x1f49b;博主介绍&a…
阅读更多...
餐厅包厢预订小程序

餐厅包厢预订小程序

餐厅包间预订小程序的功能可以包括以下几个方面&#xff1a; 用户注册与登录&#xff1a; 用户可以通过手机号、微信等方式注册和登录。 包间展示&#xff1a; 提供各类包间的详细信息&#xff0c;包括图片、容纳人数、设施、装修风格等。 实时预订&#xff1a; 用户可以选择日…
阅读更多...
QT开发：详解 Qt 多线程编程核心类 QThread：基本概念与使用方法

QT开发：详解 Qt 多线程编程核心类 QThread：基本概念与使用方法

1. 引言 在现代应用程序开发中&#xff0c;多线程编程是一个关键技术&#xff0c;能够显著提高程序的效率和响应速度。Qt 是一个跨平台的 C 框架&#xff0c;其中 QThread 类是实现多线程编程的核心类。本文将深入详解 QThread 的基本概念、使用方法及其在实际应用中的重要性。…
阅读更多...
软件测试标准流程（思维导图版）

软件测试标准流程（思维导图版）

一套标准的流程在实际工作落地并执行起来&#xff0c;针对管理可起到很好的作用。 针对效率可在工作中不断的执行&#xff0c;执行后不断的进行优化&#xff0c;再次执行&#xff0c;在不断的工作实践中慢慢完善最终适用于整个团队。 这就是标准流程的作用与实际的好处&#…
阅读更多...
实景三维夯实数字乡村孪生底座

实景三维夯实数字乡村孪生底座

随着数字乡村建设的不断推进&#xff0c;实景三维技术在乡村规划、管理、服务等方面发挥着越来越重要的作用。本文将探讨实景三维技术如何夯实数字乡村的孪生底座&#xff0c;为乡村的可持续发展提供强有力的支撑。 一、数字乡村建设的背景 数字乡村建设是推动乡村全面振兴、…
阅读更多...
神经网络（一）：神经网络入门

神经网络（一）：神经网络入门

文章目录 一、神经网络1.1神经元结构1.2单层神经网络&#xff1a;单层感知机1.3两层神经网络&#xff1a;多层感知机1.4多层神经网络 二、全连接神经网络2.1基本结构2.2激活函数、前向传播、反向传播、损失函数2.2.1激活函数的意义2.2.2前向传播2.2.3损失函数、反向传播2.2.4梯…
阅读更多...
【掌桥科研-注册安全分析报告-无验证方式导致安全隐患】

【掌桥科研-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…
阅读更多...
企业源代码一定要加密！10款超级好用的源代码加密软件推荐

企业源代码一定要加密！10款超级好用的源代码加密软件推荐

在如今竞争激烈的商业环境中&#xff0c;源代码是企业的核心资产之一。对于软件开发公司、技术公司以及以技术驱动的企业来说&#xff0c;保护源代码不被盗窃、泄露或非法篡改至关重要。如果源代码泄露&#xff0c;不仅会对企业的市场竞争力造成巨大打击&#xff0c;还可能导致…
阅读更多...
pycirclize python包画circos环形图

pycirclize python包画circos环形图

pycirclize python包画circos环形图 很多小伙伴都有画环形图的需求&#xff0c;网上也有很多画环形图的教程&#xff0c;讲解circos软件和circlize R包的比较多&#xff0c;本文介绍一款python包:pyCirclize。适合喜欢python且希望更灵活作图的小伙伴。 pyCirclize包实际上也…
阅读更多...
衡石分析平台系统管理手册-功能配置之SMTP 服务

衡石分析平台系统管理手册-功能配置之SMTP 服务

SMTP 服务​ SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议。它是一组用于从源地址到目的地址传输邮件的规范&#xff0c;通过它来控制邮件的中转方式。 HENGSHI 用户需要开启 SMTP 服务并进行配置&#xff0c;才能收到系统发送邮件。 SMTP 服务需要用户配置服务器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023