webpack【实用教程】

基础配置

配置的拆分和合并

通常 webpack 的配置文件会有3个

  • webpack.common.js 公共配置（会被另外两个配置文件导入并合并）
  • webpack.dev.js 开发环境的配置
  • webpack.prod.js 生产环境的配置

开发环境的本地服务

在 webpack.dev.js 中配置

devServer: {
        historyApiFallback: true, 
        contentBase: distPath, // 根目录
        open: true, // 是否自动打开浏览器
        compress: true, // 是否启用 gzip 压缩
        hot: true, // 是否热启动
        port: 8080, // 端口
        progress:true, // 是否显示打包的进度条

        // 设置代理 —— 存在跨域访问时【考点！】
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',
        }
}

编译ES6 —— babel-loader

webpack.common.js

    module: {
        rules: [
            {
                // 匹配 js 文件
                test: /\.js$/,
                // 使用 babel-loader 将ES6 的语法编译为 ES5
                use: ['babel-loader'],
                // 需要编译的文件目录
                include: srcPath,
                // 不需要编译的文件目录
                exclude: /node_modules/
            },
        ]
    },

新建文件 .babelrc , 内容为

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

处理样式

webpack.common.js 的 module 的 rules 中

            {
                // 匹配 css 文件
                test: /\.css$/,
                // loader 的执行顺序是：从后往前 ()
                use: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                // 匹配 less 文件
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                use: ['style-loader', 'css-loader', 'less-loader']
            }

  • postcss-loader 可以提升样式的兼容性（需要单独安装）

  • less-loader 用于将less 编译成 css

  • css-loader 用于解析 css 文件 （因为代码使用，使用的 import 导入的 css 文件）

  • style-loader 用于将 css 插入到 style 中

  • 使用 postcss-loader 还需安装 autoprefixer ，用于自动添加前缀
    还需新建文件 postcss.config.js，内容为

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

处理图片

  • 开发环境，直接加载图片的 url
    在 webpack.dev.js 中配置
    module: {
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
  • 生产环境，考虑 base64 编码的情况
    在 webpack.prod.js 中配置
// 图片 - 考虑 base64 编码的情况
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            // 小于 5kb 的图片用 base64 格式产出（可以减少http的请求）
            // 否则，依然延用 file-loader 的形式，产出 url 格式
            limit: 5 * 1024,

            // 打包到 img 目录下
            outputPath: '/img/',

            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
            // publicPath: 'http://cdn.abc.com'
        }
    }
},

打包前，清空 dist 文件夹

webpack.prod.js

    plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹

高级配置

输出多页面

不再是 SPA （单页面应用）啦，直接打包构建出多个页面

修改 webpack.common.js 中的 entry

  • 会产生 chunks
    entry: {
        // 页面 index
        index: path.join(srcPath, 'index.js'),
        // 页面 other
        other: path.join(srcPath, 'other.js')
    },

修改 webpack.prod.js 中的 output

  • output 要改为 [name] 变量，以免多个页面生成相同的 js 文件
  • name 变量的值为 entry 配置中的 key 值，即 index 和 other。
    output: {
        filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 key
        path: distPath,
    },

修改 webpack.common.js 中的 plugins

  • 每个页面都需要配置一个 plugin
    plugins: [
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })
    ]

抽离 CSS

即 css 不再直接写入 style 中，而是生成单独的 css 文件

  • 安装 mini-css-extract-plugin 插件

webpack.prod.js 中配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module 的 rules 中

 // 抽离 css
 {
     test: /\.css$/,
     use: [
         MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
         'css-loader',
         'postcss-loader'
     ]
 },
 // 抽离 less
 {
     test: /\.less$/,
     use: [
         MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
         'css-loader',
         'less-loader',
         'postcss-loader'
     ]
 }

plugins 中增加

    // 抽离 css 文件
    new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:8].css'
    })

配置压缩 css

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

新增配置项 optimization

    optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    }
  • 需安装插件 terser-webpack-plugin
  • 需安装插件 optimize-css-assets-webpack-plugin

抽离公共代码[面试常考]

  • 避免公共代码在每个页面中都引入，增加了包的体积
  • 避免第三方模块（通常比较大）每次都被重新打包，页面都需要重新加载更新
  • 会产生 chunks

webpack.prod.js 的 optimization 中

        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口chunk，对于异步导入的文件不处理
                async 异步chunk，只对异步导入的文件处理
                all 全部chunk 【通常用 all 即可】
             */

            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次，一般第三方模块都比较大，所以只要用到，就抽离出来！
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制，可以设置为其他值，比如 3kb，因为比较小的公共代码，没必要抽离出来，因为抽离出来后，会增加 http 请求
                    minChunks: 2  // 公共模块最少复用过几次，通常复用2次以上才需要抽离
                }
            }
        }

懒加载[面试常考]

webpack 默认支持，无需额外配置，使用 import ( 路径 ) 的语法即可。
在这里插入图片描述

  • import ( 路径 ) 的语法在 vue , react 异步组件中，都在使用。
  • 懒加载也会产生 chunks

处理 JSX

react 项目中需配置，实际是通过 babel 完成的处理，可在 babel 官网中查看到相关配置

  • 安装 @babel/preset-react
npm install--save-dev @babel/preset-react
  • .babelrc 中添加
{
   "presets": ["@babel/preset-react"]
}

处理 VUE

  • 安装 vue-loader
  • webpack.common.js 中添加配置
{
    test: /\.vue$/,
    use: ['vue-loader'],
    include: srcPath,
},

性能优化

可用于生产环境

  • 优化 babel-loader
  • IgnorePlugin 避免引入无用模块
  • noParse 避免重复打包
  • happyPack 多进程打包
  • ParallelUglifyPlugin 多进程压缩 JS

不可用于生产环境

  • 自动刷新
  • 热更新
  • 使用 DIlPlugin 动态链接库插件

优化 babel-loader

（利用缓存提升打包速度）
ES6 编译成 ES5 是比较耗时的

 {
     test: /\.js$/,
     loader: ['babel-loader?cacheDirectory'],
     include: srcPath,
     // exclude: /node_modules/
 },
  • 添加 ‘?cacheDirectory’ 即可使用缓存实现优化
  • include 和 exclude 配置一个即可

IgnorePlugin 避免引入无用模块

（减少打包内容提升打包速度，也缩小了包的体积）
使用范例：只引入 moment 库的中文模块
webpack.prod.js 的 plugins 中添加

 // 忽略 moment 下的 /locale 目录
 new webpack.IgnorePlugin(/\.\/locale/, /moment/),

再手动引入中文模块

import 'moment/locale/zh-cn‘

noParse 避免重复打包

（减少打包内容提升打包速度，但没有缩小包的体积）
使用范例：已经模块化处理过的 **.min.js 文件等，无需再次处理。
在这里插入图片描述

happyPack 多进程打包

（提升打包速度）

  • JS 是单线程，happyPack 可开启多进程打包，可提高构建速度（特别是多核CPU）
  • 仅适用于打包较慢的较大的项目，因为较小的项目，打包很快，开启多进程反而会降低打包速度，因为存在进程开销。
  1. 安装 happyPack 库
  2. 导入
const HappyPack = require('happypack')
  1. 改写 module 中的 rules
{
    test: /\.js$/,
    // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
    use: ['happypack/loader?id=babel'],
    include: srcPath,
},
  1. 在 plugins 中创建 HappyPack 实例
// happyPack 开启多进程打包
new HappyPack({
    // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
    id: 'babel',
    // 如何处理 .js 文件，用法和 Loader 配置中一样
    loaders: ['babel-loader?cacheDirectory']
}),

ParallelUglifyPlugin 多进程压缩 JS

（提升打包速度）

  • JS 是单线程，ParallelUglifyPlugin 可开启多进程压缩，可提高构建速度（特别是多核CPU）
  • 仅适用于打包较慢的较大的项目，因为较小的项目，打包很快，开启多进程反而会降低打包速度，因为存在进程开销。
  • 只在生产打包时使用（开发环境无需压缩）
  1. 安装插件 webpack-parallel-uglify-plugin
  2. 导入
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
  1. 在 plugins 中使用
// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
new ParallelUglifyPlugin({
    // 传递给 UglifyJS 的参数
    // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
    uglifyJS: {
        output: {
            beautify: false, // 最紧凑的输出
            comments: false, // 删除所有的注释
        },
        compress: {
            // 删除所有的 `console` 语句，可以兼容ie浏览器
            drop_console: true,
            // 内嵌定义了但是只用到一次的变量
            collapse_vars: true,
            // 提取出出现多次但是没有定义成变量去引用的静态值
            reduce_vars: true,
        }
    }
})

开启自动刷新

（减少手动操作，提升开发效率）
自动刷新是整个网页全部刷新，速度较慢，状态会丢失。

下图仅供参考，因为无需自己配置，当配置了本地服务后，就默认开启了自动刷新。

在这里插入图片描述

开启热更新

（减少复测时的页面操作，提升开发效率）
热更新是指新代码生效，网页不刷新，状态不丢失

在 webpack.dev.js 中

  1. 导入（无需安装，webpack 自带）
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
  1. 修改 entry
    entry: {
        index: [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/dev-server',
            path.join(srcPath, 'index.js')
        ],
        other: path.join(srcPath, 'other.js')
    },
  1. plugins 中创建实例
new HotModuleReplacementPlugin()
  1. devServer 中启用
hot: true,
  1. 在业务代码中，指定开启热更新的模块
if (module.hot) {
   // 指定哪些模块需要热更新，此范例的模块为 math.js
   module.hot.accept(['./math'], () => {
        // 热更新后的回调函数
        const sumRes = sum(10, 30)
        console.log('sumRes in hot', sumRes)
   })
}

使用 DIlPlugin 动态链接库插件

(减少打包内容，提升打包速度)

如针对 vue,react 框架相关的文件，比较稳定，不会轻易改变，即可打包成 dll 文件暂存起来，之后无论打包多少次，都直接使用打包好的 dll 文件，而无需再次打包。

  1. 新建文件 webpack.dll.js
const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
  mode: 'development',
  // JS 执行入口文件
  entry: {
    // 把 React 相关模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: distPath,
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(distPath, '[name].manifest.json'),
    }),
  ],
}
  1. 新增脚本
"dll": "webpack --config build/webpack.dll.js"
  1. 执行脚本
npm run dll

在dist 文件夹中生成文件 react.dll.js

  1. 在 index.html 中引入 react.dll.js
<script src="./react.dll.js"></script>
  1. 在 webpack.dev.js 中引入插件
// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
  1. 在 plugins 中新增
// 告诉 Webpack 使用了哪些动态链接库
new DllReferencePlugin({
  // 描述 react 动态链接库的文件内容
  manifest: require(path.join(distPath, 'react.manifest.json')),
}),
  1. 在 babel-loader 的配置中，不再处理 node_modules 里的代码
{
    test: /\.js$/,
    use: ['babel-loader'],
    include: srcPath,
    exclude: /node_modules/ // 不要再转换 node_modules 的代码
},

和产出代码相关的性能优化

小图片 base64 编码

  • 生产环境，考虑 base64 编码的情况
    在 webpack.prod.js 中配置
// 图片 - 考虑 base64 编码的情况
{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: {
        loader: 'url-loader',
        options: {
            // 小于 5kb 的图片用 base64 格式产出（可以减少http的请求）
            // 否则，依然延用 file-loader 的形式，产出 url 格式
            limit: 5 * 1024,

            // 打包到 img 目录下
            outputPath: '/img/',

            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
            // publicPath: 'http://cdn.abc.com'
        }
    }
},

bundle 加 hash

    output: {
        // 打包代码时，加上 hash 戳，以便文件改动时，生成新的文件名，利于页面及时更新（不再使用之前缓存的文件），若文件没变，则hash值不会变，页面会继续使用缓存，可以让页面加载更快。
        filename: 'bundle.[contenthash:8].js',  
        // 导出路径
        path: distPath,
    },

distPath 的值来自 paths.js

const path = require('path')

const srcPath = path.join(__dirname, '..', 'src')
const distPath = path.join(__dirname, '..', 'dist')

module.exports = {
    srcPath,
    distPath
}

懒加载

webpack 默认支持，无需额外配置，使用 import ( 路径 ) 的语法即可。
在这里插入图片描述

  • import ( 路径 ) 的语法在 vue , react 异步组件中，都在使用。
  • 懒加载也会产生 chunks

提取公共代码

webpack.prod.js 的 optimization 中

        // 分割代码块
        splitChunks: {
            chunks: 'all',
            /**
             * initial 入口chunk，对于异步导入的文件不处理
                async 异步chunk，只对异步导入的文件处理
                all 全部chunk 【通常用 all 即可】
             */

            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高，优先抽离，重要！！！
                    test: /node_modules/,
                    minSize: 0,  // 大小限制
                    minChunks: 1  // 最少复用过几次，一般第三方模块都比较大，所以只要用到，就抽离出来！
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制，可以设置为其他值，比如 3kb，因为比较小的公共代码，没必要抽离出来，因为抽离出来后，会增加 http 请求
                    minChunks: 2  // 公共模块最少复用过几次，通常复用2次以上才需要抽离
                }
            }
        }

IgnorePlugin 避免引入无用模块

（减少打包内容提升打包速度，也缩小了包的体积）
使用范例：只引入 moment 库的中文模块
webpack.prod.js 的 plugins 中添加

 // 忽略 moment 下的 /locale 目录
 new webpack.IgnorePlugin(/\.\/locale/, /moment/),

再手动引入中文模块

import 'moment/locale/zh-cn‘

使用CDN加速

  1. webpack.prod.js 的 output 配置
publicPath: 'cdn服务器域名'
  1. 将打包出的 dist 文件夹上传到 cdn 服务器相应的位置，确保可以正常访问

图片添加 CDN 加速的方式类似，在上文配置处理图片中，有一段注释的代码

// 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
publicPath: 'cdn服务器域名'

使用 production

webpack.prod.js 中的 mode 值设置为 ‘production’ 即可

mode: 'production',

production 模式的功能如下：

  • 自动开启代码压缩
  • Vue React 等会自动删掉调试代码(如开发环境的 warning )
  • 启动 Tree-Shaking （即对于模块中没用被导入使用的代码，不打入版本包）

注意事项：
ES6 Module 才能让 tree-shaking 生效，commonjs 不行

因为：

  • ES6 Module 静态引入，编译时引入
  • Commonjs 动态引入，执行时引入

在这里插入图片描述
所以只有 ES6 Module 才能静态分析，实现 Tree-Shaking

Scope Hosting

配置方法如下图：

在这里插入图片描述
核心原理：合并打包后的函数，使作用域更少，执行更快。

Scope Hosting 的好处：

  • 代码体积更小
  • 创建函数作用域更少
  • 代码可读性更好

常见考点

  • loader 的执行顺序是：从后往前
  • 跨域访问可通过 devServer 中的 proxy 配置实现

module chunk bundle 的区别

在这里插入图片描述

  • module-各个源码文件，webpack 中一切皆模块
  • chunk- 多模块合并成的，如 entry import() splitChunk
  • bundle-最终的输出文件

IgnorePlugin 和 noParse 的区别

  • IgnorePlugin 直接不引入，代码中没有
  • noParse 引入，但不打包

如何产出一个 lib

即如何打包出一个库，参考下图，在 output 中配置 library 属性，属性值的名称为 lib 的名称。

在这里插入图片描述

babel-polyfill 和 babel-runtime 的区别

  • babel-polyfill 会污染全局
  • babel-runtime 不会污染全局
  • 产出第三方 lib 要用 babel-runtime

webpack 如何实现懒加载

  • 使用 import()
  • Vue React 异步组件，Vue-router React-router 异步加载路由 都是使用的此语法

配置 webpack 脚本

 "dev": "webpack serve --config build/webpack.dev.js",
 "build": "webpack --config build/webpack.prod.js"

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

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

相关文章

探索未来的AI革命：GPT-5的即将登场

探索未来的AI革命：GPT-5的即将登场

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
柔性数组(flexible array)

柔性数组(flexible array)

柔性数组从C99开始支持使用 1.柔性数组的概念 概念&#xff1a; 结构体中&#xff0c;结构体最后一个元素允许是未知大小的数组&#xff0c;这就叫[柔性数组]的成员 struct S {int n;char arr[]; //数组大小未知(柔性数组成员) }; 柔性数组的特点&#xff1a; 结构体中柔性…
阅读更多...
右键新建没有TXT文本文档的解决办法

右键新建没有TXT文本文档的解决办法

电脑右键新建&#xff0c;发现没有txt了&#xff0c;我查网上办法都有点复杂&#xff0c;诸如注册表的&#xff0c;但是其实很简单&#xff0c;重启windows资源管理器就可以了。 点击重新启动&#xff0c;之后新建就有txt文档了。
阅读更多...
Windows server 由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开。

Windows server 由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开。

问题现象&#xff1a; 解决办法 临时远程方式1: 打开 mstsc 时带上 /admin 等参数&#xff0c;如下图所示&#xff1a; 使用“mstsc /admin /v:目标ip”来强制登录服务器&#xff0c;但只能是管理员身份。 远程方式2&#xff1a; 通过VM远程登陆系统后&#xff0c;运行输入R…
阅读更多...
安卓速度下载v1.0.5/聚合短视频解析下载

安卓速度下载v1.0.5/聚合短视频解析下载

功能特色 短视频下载与高级管理 – 支持短视频下载&#xff0c;为您提供一系列高级视频管理功能包括视频内容提取、智能防重复技术、视频体积压缩以及视频转换成GIF图片等&#xff1b; 磁-力链接下载升级 – 现支持磁力链接下载&#xff0c;实现边下载边播放的便捷体验&#x…
阅读更多...
LLaMA2模型训练加速秘籍：700亿参数效率提升195%！

LLaMA2模型训练加速秘籍：700亿参数效率提升195%！

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID &#xff5c; 计算机视觉研究院 学习群 &#xff5c; 扫码在主页获取加入方式 开源地址&#xff1a;https://github.com/hpcaitech/ColossalAI 计算机视觉研究院专栏 Column of Computer Vision Ins…
阅读更多...
【深度学习】服务器炼丹代码配置、Python使用指定gpu显卡运行代码

【深度学习】服务器炼丹代码配置、Python使用指定gpu显卡运行代码

【显卡】服务器炼丹代码配置 写在最前面一、查看哪几块显卡能用二、使用指定gpu运行代码1、指定使用GPU0运行脚本&#xff08;默认是第一张显卡, 0代表第一张显卡的id,其他的以此类推&#xff09;2、指定使用多张显卡运行脚本 三、如何使用1、单块显卡使用2、多GPU训练使用Data…
阅读更多...
亚太杯赛题思路发布（中文版）

亚太杯赛题思路发布（中文版）

导读&#xff1a; 本文将继续修炼回归模型算法&#xff0c;并总结了一些常用的除线性回归模型之外的模型&#xff0c;其中包括一些单模型及集成学习器。 保序回归、多项式回归、多输出回归、多输出K近邻回归、决策树回归、多输出决策树回归、AdaBoost回归、梯度提升决策树回归…
阅读更多...
javaSE知识点整理总结（上）

javaSE知识点整理总结（上）

目录 一、面向对象 1. 类、对象、方法 2.面向对象三大特征 &#xff08;1&#xff09;封装 &#xff08;2&#xff09;继承 &#xff08;3&#xff09;多态 二、常用类 1.Object类 2.Array类 3.基本数据类型包装类 4.String类 5.StringBuffer类 6.Math类 7.Random…
阅读更多...
ONLYOFFICE 8.1 桌面编辑器测评：引领数字化办公新潮流

ONLYOFFICE 8.1 桌面编辑器测评：引领数字化办公新潮流

目录 前言 下载安装 新功能概述 1.PDF 编辑器的改进 2. 演示文稿中的幻灯片版式 3.语言支持的改进 4. 隐藏“连接到云”板块 5. 页面颜色设置和配色方案 界面设计&#xff1a;简洁大方&#xff0c;操作便捷 性能评测&#xff1a;稳定流畅&#xff0c;高效运行 办公环…
阅读更多...
恭喜！Apache SeaTunnel2024开源之夏学生中选名单出炉！

恭喜！Apache SeaTunnel2024开源之夏学生中选名单出炉！

经过严格的筛选&#xff0c;开源之夏组委会及导师已经选出并录取项目对应的学生&#xff0c;社区联合中科院开展的开源之夏活动也进入到了激动人心的中选公示阶段。 在这里&#xff0c;我们恭喜下面的同学&#xff0c;已成功匹配到Apache SeaTunnel社区的项目&#xff0c;即将开…
阅读更多...
主从复制、哨兵以及Cluster集群

主从复制、哨兵以及Cluster集群

目录 1.Redis高可用 2.Redis主从复制 2.1 主从复制的作用 2.2 主从复制流程 2.3 搭建Redis主从复制 2.3.1 修改Redis配置文件&#xff08;Master节点操作&#xff09; 2.3.2 修改Redis配置文件&#xff08;Slave节点操作&#xff09; 2.3.2 验证主从复制结果 3.Redis哨…
阅读更多...
数据分析三剑客-Matplotlib

数据分析三剑客-Matplotlib

数据分析三剑客 数据分析三剑客通常指的是在Python数据分析领域中&#xff0c;三个非常重要的工具和库&#xff1a;Pandas、NumPy和Matplotlib。Pandas主要负责数据处理和分析&#xff0c;NumPy专注于数值计算和数学运算&#xff0c;而Matplotlib则负责数据可视化。这三个库相…
阅读更多...
聊聊啥项目适合做自动化测试

聊聊啥项目适合做自动化测试

作为测试从业者&#xff0c;你是否遇到过这样的场景&#xff0c;某天公司大Boss找你谈话。 老板&#xff1a;小李&#xff0c;最近工作辛苦了 小李&#xff1a;常感谢您的认可&#xff0c;这不仅是对我个人的鼓励&#xff0c;更是对我们整个团队努力的认可。我们的成果离不开每…
阅读更多...
【python】一篇文零基础到入门：快来玩吧~

【python】一篇文零基础到入门：快来玩吧~

本笔记材料源于&#xff1a; PyCharm | 创建你的第一个项目_哔哩哔哩_bilibili Python 语法及入门 &#xff08;超全超详细&#xff09; 专为Python零基础 一篇博客让你完全掌握Python语法-CSDN博客 0为什么安装python和pycharm&#xff1f; 不同于c&#xff0c;c&#xff0…
阅读更多...
NFT Insider #136：韩国将为NFT市场带来严格监管，The Sandbox DAO举办Twitter Space AMA

NFT Insider #136：韩国将为NFT市场带来严格监管，The Sandbox DAO举办Twitter Space AMA

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members &#xff08;https://twitter.com/WHALEMembers&#xff09;、BeepCrypto &#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜…
阅读更多...
已解决javax.transaction.InvalidTransactionException：事务无效的正确解决方法，亲测有效！！！

已解决javax.transaction.InvalidTransactionException：事务无效的正确解决方法，亲测有效！！！

已解决javax.transaction.InvalidTransactionException&#xff1a;事务无效的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 1. 确保事务的正确启动和结束 Spring中的事务管理 2. 避免嵌套事务问题…
阅读更多...
【代码工厂】简单地图生成

【代码工厂】简单地图生成

要求 &#xff08;图片来自codingame&#xff09; 代码 # 定义一个函数&#xff0c;用于生成模式 def generate_pattern(n, a, border_char): # 初始化一个空列表&#xff0c;用于存储生成地图pattern []# 最上面那一行的处理line n * border_charpattern.append(line)# 遍…
阅读更多...
餐饮点餐系统

餐饮点餐系统

餐饮点餐系统是一款为餐厅和顾客提供便捷点餐服务的在线平台。 1.DDL CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY COMMENT 用户ID,username VARCHAR(50) NOT NULL UNIQUE COMMENT 用户名,password VARCHAR(255) NOT NULL COMMENT 密码,email VARCHAR(100) UNIQUE…
阅读更多...
5款提高工作效率的免费工具推荐

5款提高工作效率的免费工具推荐

SimpleTex SimpleTex是一款用于创建和编辑LaTeX公式的简单工具。它能够识别图片中的复杂公式并将其转换为可编辑的数据格式。该软件提供了一个直观的界面&#xff0c;用户可以在编辑LaTeX代码的同时实时预览公式的效果&#xff0c;无需额外的编译步骤。此外&#xff0c;SimpleT…
阅读更多...
最新文章

Copyright @ 2022~2023