webpack、vue.config.js

一、webpack学习

简述

webpack是一个静态资源打包工具,它会以一个或多个文件作为打包的入口,将我们整个项目的文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,可以运行在浏览器中。一般的我们将webpack输出的文件叫做bundle

为什么需要打包工具

随着现在前端技术的发展,我们会使用各种框架(Vue、React),ES6模块化语法、Less/Sass等css预处理器,去提高新开发的效率和程序的健壮性。但是对于这些语法和框架我们的浏览器是不能直接运行的,需要使用一些打包工具去将代码进行编译,将其编译成浏览器可以运行的js、css等语法,才能运行。

此外,使用一些打包工具还可以压缩代码、做一些兼容性处理、提升代码的性能等。

常用打包工具

  • Gulp
  • Webpack
  • Vite

功能

webpack有两种开发模式,这两种开发模式的功能是有限的:

  • 开发模式:只能编译js中的ES Module模块语法
  • 生产模式:能编译js的ES Module模块语法和压缩js代码。所以要使用webpack去实现打包其他资源我们就需借助一些工具来实现。

Webpack五大核心模块

  • entry:入口
    指明了需要打包文件的入口,让webpack知道从按个文件开始打包
  • output: 输出
    指明了打包的文件要输出到哪里去,并且如何命名等
  • laoder:加载器
    由于webpack本身的功能很少,只能解析js、json等资源,所以在处于其他资源的时候就需要借助loader,webpack才能解析
  • plugins:插件
    就好比浏览器的插件一样,可以扩展webpack的功能,我们需要下载并且引用它
  • mode:模式
    生产模式:production
    开发模式:deveplopment

以上内容来自:

Webpack基础篇(-)–入门

详细讲解

一、入口 entry

默认值是 ./src/index.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点

webpack.config.js

module.exports = {entry: {main: './path/to/my/entry/file.js',},
};

也可以简写为:

module.exports = {entry: './path/to/my/entry/file.js',
};

在你想要一次注入多个依赖文件,并且将它们的依赖关系绘制在一个 “chunk” 中时,我们就可以将一个文件路径数组传递给 entry 属性

webpack.config.js

module.exports = {entry: ['./src/file_1.js', './src/file_2.js'],output: {filename: 'bundle.js',},
};

二、输出output

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在./dist文件夹中。

webpack.config.js

const path = require('path')module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname,'dist),filename: 'my-first-webpack.bundle.js'}
}

上面示例,分别通过output.pathoutput.filename属性来设置文件输出位置以及输出文件的名称

三、loader

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

在更高层面,在 webpack 的配置中,loader 有两个属性:

  • test 属性,识别出哪些文件会被转换。
  • use属性,定义出在进行转换时,应该使用哪个loader

注:loader是在module下的rules属性下进行配置

webpack.confis.js

const path = require('path')module.exports = {entry: '',output: {path: '',filename: ''},module: {rules: [{test: '/\.txt$/',use: 'raw-loader'}],},
}

以上配置中,对一个单独的module对象定义了rules属性,里面包含两个必须属性:testuse。这告诉webpack编译器,当遇到require或者import语句中被解析为 '.txt'的路径时,在对它进行打包前,先use(使用)raw-loader转换一下。

示例一

使用loader告诉webpack加载css文件,或者将TypeScript转为JavaScript。为此首先安装相对应的loader。

npm install --save-dev css-loader ts-loader

然后指示webpack对每个.css使用css-loader,以及对所有的.ts文件使用ts-loader

webpack.config.js

module.exports = {module: {relus: [{test: /\.css$/,use: 'css-loader'},{test: /\.ts$/,use: 'ts-loader'},]}
}

示例二

module.rules允许你在webpack配置中指定多个loader。loader从左到右(或从下到上)的取值执行。在下面示例中,从sass-loader开始执行,将scss/sass文件编译成普通的css文件,然后继续执行css-loader,css-loader会对css文件进行解析处理,最后执行style-loader,style-loader会将css样式嵌入到html中

module.exports = {module: {rules: [{test: /\.css$/,use: [{loader: 'style-loader'},{loader: 'css-loader',option: {modules: true // modules: true选项意味着它会将CSS类名转换为唯一的哈希值,这样可以避免在项目中的CSS样式冲突。}},{loader: 'sass-loader'}]}]}
}

四、插件plugin

loader用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。想要使用一个插件,只需要require()它,然后把它添加到plugin数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的的而多次使用同一个插件,这时要通过new操作符来创建一个插件实例。

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

由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入一个 new 实例。

ProgressPlugin 用于自定义编译过程中的进度报告,HtmlWebpackPlugin 将生成一个 HTML 文件,并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

五、模式mode

通过选择developmentproductionnone之中的一个,来设置mode参数,你可以启用webpack内置在相应环境下的优化,其默认值为production

module.exports = {mode: 'production'
}

二、关于vue.config.js

简述

vue.config.js是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它就会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段,但是注意这种写法需要你严格遵守JSON的格式来写。

这个文件应该导出一个包含了选项的对象:

vue.config.js

module.exports = {// 选项
}

vue.config.js

或者,也可以使用@vue/cli-service提供的defineConfig帮手函数,以获得更好的类型提示:

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 选项
})

vue.config.js的配置项

publicPath

  • 部署时的基本 URL

  • 类型:string

  • 默认值:“/”

  • 用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath

  • 默认情况下,vue-cli 会假设你的应用是被部署在一个域名的根路径上,例如https://www.baidu.com/。如果部署在一个子路径上,你就需要用这个选项指定这个子路径。例如你要部署在https://www.baidu.com/other/则设置publicPath/other/

  • publicPath这个值也可以设置为(' ')或是相对路径(' ./ '),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。

vue.config.js

// 这个值在开发环境下同样生效module.exports = {publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/'
}

outputDir

  • 打包后生成的文件夹目录

  • 类型: string

  • 默认值:dist

  • 当运行vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除(构建时传入--no-clean可关闭该行为)

assetsDir

  • 放置生成的静态资源的目录

  • 类型:string

  • 默认值:‘’

  • 放置生成的静态资源(js、css、img、fonts)的(相对于outputDir的)目录

indexPath

  • 生成的index.html的输出路径

  • 类型:string

  • 默认值: index.html

  • 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。

finenameHashing

  • 文件名是否包含哈希

  • 类型:string

  • 默认值:true

  • 默认情况下,生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存。然而,这也要求index的html是被vue cli自动生成的。如果你无法使用vue cli生成index html,你可以通过将这个选项设为false来关闭文件名哈希。

productionSourceMap

  • 类型:boolean
  • 默认值:true
  • 如果你不需要生产环境的source map,可以将其设置为false以加速生产环境构建。

pages

  • 类型:object
  • 默认值: undefind
  • multi-page模式下构建应用,每个page应该有一个对应的JavaScript入口文件。其值应该是一个对象,对象的key是入口的名字,value是:
  • 一个指定了entrytemplatefilenametitlechunks的对象(除了entry之外都是可选的);
  • 或一个指定其entry的字符串

vue.config.js

module.exports = {pages: {index: {// page 的入口entry: 'src/index/main.js',// 模板来源template: 'public/index.html',// 在 dist/index.html 的输出filename: 'index.html',// 当使用 title 选项时,// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>title: 'Index Page',// 在这个页面中包含的块,默认情况下会包含// 提取出来的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', 'index']},// 当使用只有入口的字符串格式时,// 模板会被推导为 `public/subpage.html`// 并且如果找不到的话,就回退到 `public/index.html`。// 输出文件名会被推导为 `subpage.html`。subpage: 'src/subpage/main.js'}
}

css相关配置

  • Vue CLI 项目天生支持 PostCSSCSS Modules 和包含 SassLessStylus 在内的预处理器。

1、引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。

2、预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader

// Sass
npm install -D sass-loader sass// Less
npm install -D less-loader less// Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型,或在 *.vue 文件中这样来使用:

<style lang="scss">$color: red;
</style>

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……),你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子:

// vue.config.jsconst path = require('path')module.exports = {chainWebpack: config => {const types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))},
}function addStyleResource (rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, './src/styles/imports.styl'),],})
}

PostCSS

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader

CSS Modules

如果你希望自定义生成的 CSS Modules 模块的类名,可以通过 vue.config.js 中的 css.loaderOptions.css 选项来实现。所有的 css-loader 选项在这里都是支持的,例如 localIdentNamecamelCase

// vue.config.jsmodule.exports = {css: {loaderOptions: {css: {// 注意:以下配置在 Vue CLI v4 与 v3 之间存在差异。// Vue CLI v3 用户可参考 css-loader v1 文档// https://github.com/webpack-contrib/css-loader/tree/v1.0.1modules: {localIdentName: '[name]-[hash]'},localsConvention: 'camelCaseOnly'}}}
}

css: {extract: {// 打包后css文件名称添加时间戳filename: `css/[name].${timeStamp}.css`,chunkFilename: `css/chunk.[id].${timeStamp}.css`},loaderOptions: {less: {modifyVars: {/* less 变量覆盖,用于自定义 ant design 主题 */'primary-color': '#1890FF','link-color': '#1890FF','border-radius-base': '4px','layout-color': '#9867f7'},javascriptEnabled: true}}},

向预处理器 Loader 传递选项

有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量:

// vue.config.js
module.exports = {css: {loaderOptions: {// 给 sass-loader 传递选项sass: {// @/ 是 src/ 的别名// 所以这里假设你有 `src/variables.sass` 这个文件// 注意:在 sass-loader v8 中,这个选项名是 "prependData"additionalData: `@import "~@/variables.sass"`},// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效// 因为 `scss` 语法在内部也是由 sass-loader 处理的// 但是在配置 `prependData` 选项的时候// `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置scss: {additionalData: `@import "~@/variables.scss";`},// 给 less-loader 传递 Less.js 相关选项less:{// http://lesscss.org/usage/#less-options-strict-units `Global Variables`// `primary` is global variables fields nameglobalVars: {primary: '#fff'}}}}
}

devServer

  • 类型:Object
  • 所有webpack-dev-server的选项都支持,注意:
  • 有些值像hostporthttps可能会被命令行参数覆写
  • 有些值像publicPathhistoryApiFallback不应该被改写,因为它们需要和开发服务器的publicpath同步以保障正常的工作。

devServer.proxy

  • dev环境下,webpack-dev-server相关配置

  • 类型:string/Object

  • 如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。

devServer.proxy可以是一个指向开发环境API服务器的字符串

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}module.exports = {devServer: {proxy: {port: 8090,host: '0.0.0.0',https: false,open: true,}}
}
  • port:开发运行时的端口
  • host:开发运行时域名,设置成 0.0.0.0 ,在同一个局域网下,如果你的项目在运行,同时可以通过你的 http://ip:port/...访问你的项目
  • https:是否启用https
  • open:npm run serve 时是否直接打开浏览器

这会告诉开发服务器将任何未知请求(没有匹配到静态文件的请求)代理到http://localhost:4000

如果你想要更多的代理控制行为,也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

module.exports = {
// 反向代理devServer: {index: '/login.html',   // 默认打开文件open: true,             // 自动打开浏览器host: 'localhost',      // 默认打开域名port: 8080,             // 默认打开端口号https: false,           // 开启关闭https请求hotOnly: false,         // 热更proxy: {// 配置跨域'/api': {target: 'http://dev.aabb.cn:8082/', // 代理地址,这里设置的地址会代替axios中设置的baseURLws: true,    // proxy websocketschangeOrigin: true, // 如果接口跨域,需要进行这个参数配置pathRewrite: {      // pathRewrite方法重写url'^/api': '/',},},},},
} 

示例

vue.config.js

module.exports = {publicPath: "./", // 公共路径 默认为"/",建议使用"./"相对路径devServer: {   // 本地服务器配置(npm run serve)port: 8080, // 端口host: "localhost", // 域名https: false, // 是否开启httpsopen: true	// 是否在开启服务器后自动打开浏览器访问该服务器},lintOnSave: false,  // 取消lint语法检测,此处可不配置outputDir:"dist", // build打包输出目录assetsDir:"assets", // 静态文件输出目录,基于distindexPath: "index.html",  // 输出html文件名productionSourceMap: false, // 取消.map文件的打包,加快打包速度configureWebpack: (config) => {// process.env为环境变量,分别对应.env.development文件和.env.production文件 此处表示加快开发环境打包速度if (process.env.NODE_ENV !== 'production') return;config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;	//生产环境去掉console.logreturn {  // 此处配置webpack.config.js的相关配置plugins: [],performance: {}};}
};

插件及规则的配置

在vue.config.js,如果要新增/修改webpack的plugins或者rules,有两种方式。

configgureWebpack方式

  • configgureWebpack 是相对比较简单的一种方式
  • 它可以是一个对象:和webpack本身配置方式一致,该对象将会被webpack-merge 合并入最终的webpack配置
  • 它也可以是一个函数:直接在函数内部进行修改配置
module.exports = {configureWebpack: {rules: [],plugins: [new MyAwesomeWebpackPlugin()]}
}configureWebpack: (config) => {// 例如,通过判断运行环境,设置modeconfig.mode = 'production'
}

chainWebpack方式

  • chainWebpack是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  • chainWebpack 链式操作(高级),接下来所有的配置都会在该选项中进行配置。

三、webpack-chain的使用

简述

  • 通过链式的方式修改webpack的配置

使用

entry 和 output

module.exports = {chainWebpack: config => {config.entryPoints.clear() // 把默认的入口清空config.entry('entry1').add('./src/index1.tsx') // 新增入口config.entry('entry2').add('./src/index2.tsx') // 新增文件config.output.path("dist").filename("[name].[chunkhash].js").chunkFilename("chunks/[name].[chunkhash].js").libraryTarget("umd")}
}

alias

  • 对于路径别名的配置,配置如下:
module.exports = {chainWebpack: config => {config.resolve.alias.set('assets',resolve('src/assets')).set('components',resolve('src/components')).set('static',resolve('src/static')).delete('static') // 删掉指定的别名}
}

loader

1、添加一个loader
module.exports = {chainWebpack: config => {config.module.rule(name).use(name).loader(loader).option(option)}
}

示例

module.exports = {chainWebpack: config => {config.module.rules('ts').test(/\.tsx?/).use('ts-loader').loader('ts-loader').option({transpileOnly: true}).end()}
}
2、修改loader参数
  • 可通过tap方法修改loader的参数:
module.exports = {chainWebpack: config => {config.module.rule('ts').test(/\.tsx?/).use('ts-loader').loader('ts-loader').tap(option => {// do some ...return option}).end()}
}

在所有的配置完成之后,可以通过调用config.toConfig()来拿到最后的配置对象,可以直接作为webpack的配置。

3、移除一个loader
  • 通过uses对象的delete方法,根据loadername删除
module.exports = {chainwebpack: config => {config.module.rule('ts').test(/\.tsx?/).uses.delete('ts-loader')}
}

plaugin

1、添加一个插件
  • 先指定名字(这个名字是自定义的),然后通过 use 添加插件
  • use的第一个参数是插件名称,第二个参数是插件参数,这个参数必须是一个数组,也可以不传。
// vue.config.jsmodule.exports = {chainWebpack: config => {config.plugin(name).use(WebpackPlugin, args)}
}

示例

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {chainWebpack: config => {config.plugin('extract').use(ExtractTextPlugin, [{filename: 'build.min.css',allChunks: true,}])}
}
2、移除插件
  • 添加插件时我们自定义了一个插件name,移除插件就是通过这个name来进行实现的
module.exports = {chainWebpack: config => {config.plugins.delete('extract')}
}
3、指定插件在xx插件之前/之后凋用

例如,现在需要指定 html-webpack-plugin 这个插件在刚刚写的 extract 插件之前执行,则写法如下:

const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {chainWebpack: config => {config.plugin('html').use(htmlWebpackPlugin).before('extract')}
}

通过 before 方法,传入另一个插件的 name 即可,表示在另一个插件之前执行。

同样,如果需要在 extract 插件之后执行,调用 after 方法

const htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {chainWebpack: config => {config.plugin('html').use(htmlWebpackPlugin).after('extract')}
}
4、动态修改插件参数
  • 我们可以用 webpack-chain 来动态修改插件的传参,举例如下:
  • 使用tap方法修改参数
module.exports = {chainWebpack: config => {config.plugin(name).use(webpackPluginName).tap(args => newArgs)}
}
5、修改插件初始化过程
  • 我们可以自定义插件的实例化的过程,比如下面这样
  • 通过init方法,返回一个实例,这将代替原有的实例化过程
module.exports = {chainWebpack: config => {config.plugin(name).init((Plugin, args) => new Plugin(...args));}
}

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

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

相关文章

使用ElementUI结合Mock完成主页的搭建

目录 一、Mock ( 1 ) 讲述 ( 2 ) 作用 二、引用 三、主页搭建 学习后带来的收获 一、Mock ( 1 ) 讲述 Mock.js是一个用于前端开发中模拟数据的库。它可以帮助开发人员在前端开发过程中模拟接口返回的数据&#xff0c;从而实现前后端分离开发。Mock.js提供了一套简单易…

Python和Scrapy构建可扩展的框架

构建一个可扩展的网络爬虫框架是利用Python和Scrapy实现高效数据采集的重要技能。在本文中&#xff0c;我将为您介绍如何使用Python和Scrapy搭建一个强大灵活的网络爬虫框架。我们将按照以下步骤展开&#xff1a; 1. 安装Scrapy&#xff1a; 首先&#xff0c;确保您已经安装了…

如何计算3种卷积之后的尺寸(普通卷积,转置卷积,空洞卷积)

文章目录 前言一、普通卷积二、转置卷积三、空洞卷积 前言 三种卷积之后的feature map的尺寸如何计算。包括普通卷积&#xff0c;转置卷积&#xff0c;空洞卷积。可以在下面这个链接看到三种卷积的动态图。 卷积动态图 一、普通卷积 普通卷积比较简单了&#xff0c;其计算方式…

《动手学深度学习 Pytorch版》 6.4 多输入多输出通道

import torch from d2l import torch as d2l6.4.1 多输入通道 简言之&#xff0c;多通道即为单通道之推广&#xff0c;各参数对上即可。 def corr2d_multi_in(X, K):# 先遍历“X”和“K”的第0个维度&#xff08;通道维度&#xff09;&#xff0c;再把它们加在一起return sum…

【python爬虫】爬虫所需要的爬虫代理ip是什么?

目录 前言 一、什么是爬虫代理 IP 二、代理 IP 的分类 1.透明代理 2.匿名代理 3.高匿代理 三、如何获取代理 IP 1.免费代理网站 2.付费代理服务 四、如何使用代理 IP 1.使用 requests 库 2.使用 scrapy 库 五、代理 IP 的注意事项 1.代理 IP 可能存在不稳定性 2…

企业关键数据采集如何做

数据对于企业的重要性不言而喻&#xff0c;目前又处于大数据时代&#xff0c;企业对于数据的解读将是辅助决策最重要的一环。依据所掌握的数据信息&#xff0c;帮助企业做决策的优化。然而&#xff0c;在企业的关键数据采集并不是一项简单轻松的任务&#xff0c;他需要企业投入…

DC电源模块的过热保护功能

BOSHIDA DC电源模块的过热保护功能 DC电源模块的过热保护功能是为了防止电源模块因长时间工作或外部环境因素导致的过热而损坏。在使用DC电源模块时&#xff0c;电源模块内部的电子元件会产生一定的热量&#xff0c;如果超过了元件所能承受的温度范围&#xff0c;就可能会发生…

【VsCode】vscode创建文件夹有小图标显示和配置

效果 步骤 刚安装软件后&#xff0c; 开始工作目录下是没有小图标显示的。 如下图操作&#xff0c;安装vscode-icons 插件&#xff0c;重新加载即可 创建文件夹&#xff0c;显示图标如下&#xff1a;

Jenkins学习笔记2

Jenkins下载安装&#xff1a; 从清华源开源镜像站上下载jenkins的安装包&#xff1a; 安装的是这个版本。 关于软件的版本&#xff0c;尽量使用LTS&#xff0c;长期支持。 首先是安装openjdk&#xff1a; yum install fontconfig java-11-openjdk[rootlocalhost soft]# java …

ElasticSearch - DSL查询文档语法,以及深度分页问题、解决方案

目录 一、DSL 查询文档语法 前言 1.1、DSL Query 基本语法 1.2、全文检索查询 1.2.1、match 查询 1.2.2、multi_match 1.3、精确查询 1.3.1、term 查询 1.3.2、range 查询 1.4、地理查询 1.4.1、geo_bounding_box 1.4.2、geo_distance 1.5、复合查询 1.5.1、相关…

ubuntu18.04安装docker

ubuntu18.04安装docker 文章目录 ubuntu18.04安装docker一.安装1.更新软件库索引2.安装一些必要的软件包3.添加Docker的官方GPG密钥4.添加Docker软件库5.再次更新软件库索引6.安装Docker CE7.启动Docker并设置开机启动8.验证Docker安装9.(若要让非root用户可以运行Docker命令)可…

Pipenv:一个Python的包管理工具,用于创建一个python的虚拟环境

Pipenv是一个Python的包管理工具&#xff0c;它提供了一种简单的方式来管理Python项目的依赖关系。 以下是使用Pipenv的一些基本步骤&#xff1a; 安装Pipenv&#xff1a;可以通过运行以下命令来安装pipenv&#xff1a; pip install pipenv初始化项目&#xff1a;在项目的根…

【QT】QT事件Event大全

很高兴在雪易的CSDN遇见你 &#xff0c;给你糖糖 欢迎大家加入雪易社区-CSDN社区云 前言 本文分享QT中的事件Event技术&#xff0c;主要从QT事件流程和常用QT事件方法等方面展开&#xff0c;希望对各位小伙伴有所帮助&#xff01; 感谢各位小伙伴的点赞关注&#xff0c;小易…

C# string stringbuilder区别

在C#中&#xff0c;有三个主要的字符串类型&#xff0c;分别是string、StringBuffer和StringBuilder。这些类型之间有一些重要的区别&#xff1a; string&#xff1a; string 是C#中的字符串类型&#xff0c;是不可变的。这意味着一旦创建了一个字符串对象&#xff0c;就不能修…

如何搭建数据驱动自动化测试框架?

前言 说到数据驱动自动化测试&#xff0c;你会不会有这样的疑问&#xff1a;数据怎么管理&#xff1f;数据怎么才能驱动测试用例执行&#xff1f;到底怎么样才算数据驱动&#xff1f;那么本篇文章就教你如何进行数据驱动测试&#xff0c;相信你一定能对数据驱动自动化测试有一…

Android AMS——ActivityThread解析(四)

一、ActivityThread简介 ActivityThread 是Android 系统中的一个关键类,它是应用程序的入口点,并且负责启动和管理应用程序的主线程以及处理与UI相关的操作。下面是关于 ActivityThread 的一些简介: 应用程序的启动:当用户启动一个应用程序时,Android系统会创建一个新的进…

FlashDuty Changelog 2023-09-21 | 自定义字段和开发者中心

FlashDuty&#xff1a;一站式告警响应平台&#xff0c;前往此地址免费体验&#xff01; 自定义字段 FlashDuty 已支持接入大部分常见的告警系统&#xff0c;我们将推送内容中的大部分信息放到了 Lables 进行展示。尽管如此&#xff0c;我们用户还是会有一些扩展或定制性的需求…

设计模式:享元模式(C++实现)

享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构设计模式&#xff0c;它通过共享对象来有效地支持大量细粒度的对象。享元模式的目标是尽量减少内存使用&#xff0c;通过共享相同的数据来减少对象的数量。 以下是一个简单的C享元模式的示例&#xff1a; #includ…

网络安全--防火墙旁挂部署方式和高可靠性技术

目录 一、防火墙 二、防火墙旁挂部署方式 使用策略路由实现 第一步、IP地址配置 第二步、配置路由 第三步、在防火墙上做策略 第四步、在R2上使用策略路由引流 三、防火墙高可靠性技术--HRP 拓扑图 第一步、配置SW1、SW2、FW1、FW2 第二步、进入防火墙Web页面进行配…

基于Python的微博舆论分析,微博情感分析可视化系统(V2.0)

简介 Python基于微博的舆情分析&#xff0c;情感分析可视化系统 微博舆情分析系统&#xff0c;项目后端分爬虫模块、数据分析模块、数据存储模块、业务逻辑模块组成。 功能包括 登陆注册用户管理热门事件展示舆情分析&#xff0c;包括舆情分析&#xff0c;情感分类&#xff0…