Webpack5常用配置

1、序言

        Webpack属于构建工具，可以将开发者代码转化成浏览器能识别的代码，让开发者专注代码实现，不用过多关注浏览器兼容性问题。

        Webpack常见功能：

  • 模块打包：Webpack 可以将项目中的所有模块（包括 JavaScript、CSS、图片等）打包成一个或多个 bundle。这有助于减少 HTTP 请求，提高页面加载速度。

  • 代码分割：Webpack 支持代码分割，可以将不同功能模块的代码分割成不同的 bundle，按需加载，从而提高应用的加载速度。

  • 模块热替换（HMR）：Webpack 支持模块热替换，这意味着在开发过程中，当代码发生变化时，Webpack 可以自动重新打包并更新浏览器中的代码，而不需要刷新页面

  • Loader翻译器：Loader 允许你在打包过程中预处理文件，例如将less/scss转换成css、jsx/typescript转换成js、图片转换为 Base64 编码等等

  • 开发服务器：Webpack 提供了一个开发服务器，可以在开发过程中提供快速的实时重新加载功能

  • 树摇（Tree Shaking）：Webpack 可以移除未引用的代码，这有助于减少最终打包文件的大小

  • ...

2、配置

        2.1、初始化项目

#初始化仓库
npm init

#安装webpack、webpack-cli
npm i webpack
npm i webpack-cli

        根目录下新建webpack.config.js：

module.exports = {
    // 入口：entry：String | Object
    entry: '',
    // 出口
    output: {
    },
    // 各种loader配置
    module: {},
    // 各种插件配置
    plugins: [],
    // 优化配置
    optimization: {},
    // 开发服务器配置
    devServer: {},
    // development：开发模式，production：生产模式
    mode: 'development',
}

        文件目录

        math.js：加减乘除函数

        main.js：

        index.html

        运行发现：浏览器不能识别esmodule，因此需要webpack打包构建成浏览器能识别的语言

        2.2、配置出入口

module.exports = {
  // 入口：entry：String | Object
  entry: path.resolve(__dirname, 'src/main.js'),
  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
}
npx webpack --config webpack.config.js

        打包成功：

        所有的打包文件合在一起，变成定义的输出的文件名称main.js

        

        修改public下的index.html的script标签地址为dist/main.js

         待完善的点：

  • 每次重新打包，上次的打包结果会干扰本次打包结果

        解决：

  1. webpack5：output: {clean: true}
  2. webpack4：安装clean-webpack-plugin插件
npm i clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}
  • 每次还要手动修改public/index.html的对应的script标签的引用地址 
npm i html-webpack-plugin
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    // 以 public/index.html 为模板创建文件
    new HtmlWebpackPlugin({
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
};
  • 每次都要在cmd控制台输入一长串的npx webpack --config webpack.config.js

        在package.json配置命令

  • 每次打包输出结果都是main.js，浏览器认为文件没发生改变，会走浏览器缓存，导致更新部署项目不生效
output:{
    // 根据文件内容生成hash
    filename: '[contenthash].js'
}

        2.3、开发服务器

        解决：每次修改文件内容都要重新打包即手动执行npm run build操作，实现热更新：所见即所得；

        原理：npm run build 打包至磁盘，webpack serve开发服务器会打包至内存

npm i webpack-dev-server -D

        webpack.config.js 

module.exports = {
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
}

        package.json

"scripts": {
    "dev": "npx webpack serve --config webpack.config.js --mode=development",
    "build": "npx webpack --config webpack.config.js --mode=production"
 }

        tips：执行npm run dev会报错误，解决：升级node版本至18以上即可 

        2.4、区分环境

生产环境webpack5帮我们做了优化，如压缩js、html、开启tree-shaking，开发环境配置的devServer才生效；

写2套webpack.config.js问题

  • 重复配置多
  • 心智负担重

因此需要区分webpack环境

前面在package.json里面的script脚本已经设置了--mode=production 或者--mode=development了，然后发现process.env.NODE_ENV打印的结果始终是undefined，这里使用cross-env进行环境切换；

npm i cross-env -D

        package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

        webpack.config.js中

// 判断是否是生成环境
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  // development：开发模式，production：生产模式
  mode: isProduction ? 'production' : 'development',
  // 入口：entry：String | Object
  entry: path.resolve(__dirname, 'src/main.js'),
  // 出口
  output: {
    filename: isProduction ? 'static/js/[contenthash:10].js' : 'static/js/[name].js',
    path: isProduction ? path.resolve(__dirname, 'dist') : undefined,
    clean: true
  },
  // 各种loader配置
  module: {},
  // 各种插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html')
    })
  ],
  // 优化配置
  optimization: {},
  // 开发服务器配置
  devServer: {
    port: 8000,
    host: 'localhost',
    open: true
  },
}

        2.5、处理样式文件

        问题

  • js中引入css文件报错
  • 最后打包的静态资源不包含任何样式文件，即css代码不生效
npm i css-loader style-loader less less-loader -D

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块

style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

less-loader：将less转变成css

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"]
      }
    ]
  },
}

        2.5、处理图片资源

        当图片小于一定大小时转变成base64，这样可以减少http请求

        webpack5：

module.exports = {
  // 各种loader配置
  module: {
    rules: [
      // 处理图片资源
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
        parser: {
          // 小于10kb
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      }
    ]
  },
 
}

        webpack4：

npm i  url-loader file-loader
module.exports = {
  // 各种loader配置
   module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i, // 匹配png, jpg, jpeg, gif图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024, // 小于10KB的图片将被转换成Base64
              fallback: 'file-loader', // 大于10KB的图片使用file-loader处理
              outputPath: 'images/' // 输出路径
            }
          }
        ]
      }
    ]
  },
 
}

        2.6、代码压缩 

生产环境webpack5已经帮我们压缩js、html了，因此需要手动压缩css；

npm i css-minimizer-webpack-plugin
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // 优化配置
  optimization: {
    minimize: true,
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
    ],
  },
}

        2.7、兼容性处理

                2.7.1、css

npm i postcss-loader postcss postcss-preset-env

        webpack.config.js

module.exports = {
  // 各种loader配置
    module: {
    rules: [
      // 处理css后缀文件
      {
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env"
                  ]
                ]
              }
            }
          }
        ]
      },
      // 处理less后缀文件
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  "postcss-preset-env"
                ]
              ]
            }
          }
        }, "less-loader"]
      }
    ]
  },
}

         package.json

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

        这样对低版本浏览器的css3语法就会加前缀，如-webkit

                2.7.2、js

        js兼容性处理主要使用babel，babel的主要作用如下

  • 将es6转化成es5
  • 将jsx语法转成js
npm i babel-loader @babel/core @babel/preset-env core-js -D

根目录下新建babel.config.js

module.exports = {
   // 智能预设：能够编译ES6语法
   presets: [
    [
      "@babel/preset-env",
      // 按需加载core-js的polyfill
      { 
        // false: 不对当前的JS处理做 polyfill 的填充
        // usage: 依据用户源代码当中所使用到的新语法进行填充
        // entry: 依据我们当前筛选出来的浏览器.browserslistrc决定填充什么
        useBuiltIns: "usage", 
        corejs: { version: "3", proposals: true } 
      },
    ],
  ],
}

 webpack.config.js

module.exports = {
 // 各种loader配置
  module: {
    rules: [
      // 处理js后缀文件
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        use: [
          {
            loader: "babel-loader",
            options: {
              // Babel 在每个文件都插入了辅助代码，使代码体积过大，下面插件能减少代码体积
              plugins: ["@babel/plugin-transform-runtime"], 
            }
          }
        ]
      },
    ]
  },

}

        2.8、提取css

问题：将网络调成3g，然后刷新页面，发现白屏

解决：将css提取到一个文件，通过 link 标签引入

npm i mini-css-extract-plugin -D

webpack.config.js

        将style-loader替换成MiniCssExtractPlugin.loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

// 各种loader配置
  module: {
    rules: [
      // 处理css后缀文件
      {
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env"
                  ]
                ]
              }
            }
          }
        ]
      },
      // 处理less后缀文件
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  "postcss-preset-env"
                ]
              ]
            }
          }
        }, "less-loader"]
      },
    ]
  },
  // 各种插件配置
  plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin(),
  ],
}

        2.9、PWA

问题：一旦断网，应用无法打开

PWA：渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。其中最重要的是，在 离线(offline) 时应用程序能够继续运行功能。内部通过 Service Workers 技术实现的。

npm i workbox-webpack-plugin -D

webpack.config.js

const WorkboxPlugin = require("workbox-webpack-plugin");
module.exports = {
   // 各种插件配置
  plugins: [
    // pwa
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
}

入口文件：main.js

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then((registration) => {
        console.log("SW registered: ", registration);
      })
      .catch((registrationError) => {
        console.log("SW registration failed: ", registrationError);
      });
  });
}

        2.10、Code Split

问题：打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。

解决：我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

                2.10.1、多入口

const path = require('path')

module.exports = {
    entry: {
        main: './src/main.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
        clear: true,
    },
}

        结果：dist/js目录下有main.js、app.js文件

                2.10.2、多入口优化

        问题：如果main.js、app.js都引入math.js，造成math.js被重复打包

        解决：

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

module.exports = {
    entry: {
        main: './src/main.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
        clear: true,
    },
    optimization: {
        splitChunks: {
            chunks: "all", // 对所有模块都进行分割
        }
    }
}

                2.10.3、按需加载

        按需加载：动态加载某个chunk

        main.js：点击box元素，动态导入vue

document.querySelector('.box').addEventListener('click', () => {
  import(/* webpackChunkName: "vue" */ 'vue').then((res)=>{
    console.log('res:', res)
  })
})

        webpack.config.js

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

module.exports = {
    entry: {
        main: './src/main.js',
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
        chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
        assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
        clear: true,
    },
    plugins: [
        // 提取css成单独文件
        new MiniCssExtractPlugin({
          // 定义输出文件名和目录
          filename: "static/css/[name].css",
          chunkFilename: "static/css/[name].chunk.css",
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: "all", // 对所有模块都进行分割
        }
    }
}

   实际应用：vue-router的按需加载

  • 路由匹配
const routes = [
    {

        path: '/test',
        component: () => import(/* webpackChunkName: "test" */'@/views/test.vue')
    }
]
  • 加载相应的webpackChunkName

                2.10.4、按需加载优化 

问题：如果动态导入的chunk非常大或者网络极差，就会有明显卡顿的问题

解决：提前加载想要加载的资源

Preload：告诉浏览器立即加载资源；加载优先级高；兼容性好一些；只能加载当前页面需要使用的资源；

Prefetch：告诉浏览器在空闲时才开始加载资源；加载优先级低；兼容性差一些；可以加载当前页面资源，也可以加载下一个页面需要使用的资源；

npm i @vue/preload-webpack-plugin -D

const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
module.exports = {
    plugins: [
       new PreloadWebpackPlugin({
         rel: "preload", // preload兼容性更好
         as: "script",
         // rel: 'prefetch' // prefetch兼容性更差
       }), 
    ]
}

打包结果：

        2.11、 提升构建速度

                2.11.1、include/exclude

node_modules下的依赖无须下载直接使用，babel不需要对他们进行处理

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "../src"),
                exclude: /node_modules/, // 排除node_modules代码不编译
                use: [
                  {
                    loader: "babel-loader",
                    options: {
                        plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                    }
                  }
                ]
            },
        ]
    }
}

                2.11.2、oneof

打包时每个文件都会经过所有 loader 处理，尽管有test正则原因实际没有处理上，但是都要过一遍；比较慢。oneof只要匹配上一个 loader, 剩下的就不匹配了

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          ...其它loader
          // 处理js
          {
            test: /\.js$/,
            // exclude: /node_modules/,
            include: path.resolve(__dirname, 'src'),
            use: [
              {
                loader: 'thread-loader',
                options: {
                  workers: threads
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  cacheCompression: false,
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                }
              }
            ]
          }
        ]
      }
    ]
  },
  
}

                2.11.3、cache

作用：缓存之前的Babel 编译结果，只打包变化部分的内容

const path = require('path')

module.exports = {
  // 各种loader配置
  module: {
    rules: [
      // 处理js后缀文件
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        use: [
          {
            loader: "babel-loader",
            options: {
              plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            }
          }
        ]
      },
    ]
  },
}

                2.11.4、Thead

问题：项目越来越庞大时，打包速度越来越慢

解决：开启多进程打包

tips：小型项目使用Thread提升打包速度不显著，反而会延长打包时间，大型项目效果会更加显著

npm i thread-loader terser-webpack-plugin -D

webpack.config.js

const path = require('path')
const os = require("os");
// cpu核数
const threads = os.cpus().length;

// js压缩工具，只在生产环境生效
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        oneOf: [
          // 处理js
          {
            test: /\.js$/,
            // exclude: /node_modules/,
            include: path.resolve(__dirname, 'src'),
            use: [
              {
                loader: 'thread-loader',
                options: {
                  workers: threads
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  cacheCompression: false,
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 压缩
  optimization: {
    minimize: true,
    minimizer: [
      // js压缩
      new TerserPlugin({
        parallel: threads,
      }),
    ],
    splitChunks: {
      chunks: 'all',
    },
  },
}

3、完整配置 

webpack.config.js

const path = require('path')
const os = require("os");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");

// 判断是否是生成环境
const isProduction = process.env.NODE_ENV === 'production'
// cpu核数
const threads = os.cpus().length;

module.exports = {
  entry: path.resolve(__dirname, 'src/main.js'),
  output: {
    filename: isProduction ? 'static/js/[contenthash:10].js' : 'static/js/[name].js',
    path: isProduction ? path.resolve(__dirname, 'dist') : undefined,
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'static/media/[name].[hash][ext]',
    clean: true
  },
  module: {
    rules: [
      {
        oneOf: [
          // 处理css后缀文件
          {
            test: /\.css$/,
            // 从右到左、从下到上使用loader
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [
                      [
                        "postcss-preset-env"
                      ]
                    ]
                  }
                }
              }
            ]
          },
          // 处理less后缀文件
          {
            test: /\.less$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [
                      [
                        "postcss-preset-env"
                      ]
                    ]
                  }
                }
              },
              'less-loader'
            ]
          },
          // 处理图片
          {
            test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 20 * 1024
              }
            }
          },
          // 处理js
          {
            test: /\.js$/,
            // exclude: /node_modules/,
            include: path.resolve(__dirname, 'src'),
            use: [
              {
                loader: 'thread-loader',
                options: {
                  workers: threads
                }
              },
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  cacheCompression: false,
                  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                }
              }
            ]
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 自动帮我们引入打包生成的js资源
      template: path.resolve(__dirname, 'public/index.html'),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/[name].[contenthash:8].css",
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
    new PreloadWebpackPlugin({
      rel: 'preload',
      as: 'script'
    }),
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
  // 压缩
  optimization: {
    minimize: true,
    minimizer: [
      // js压缩
      new TerserPlugin({
        parallel: threads,
      }),
      // css压缩
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      chunks: 'all',
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`
    },
  },
  devServer: {
    port: 3000,
    host: 'localhost',
    open: true,
    hot: true,
    compress: true
  },
  mode: isProduction ? 'production' : 'development'
}

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env",
      // 按需加载core-js的polyfill
      {
        useBuiltIns: "usage",
        corejs: {
          version: 3
        },
      },]
  ],
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.5.12",
  },
  "devDependencies": {
    "core-js": "^3.38.1",
    "css-loader": "^7.1.2",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "style-loader": "^4.0.0",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "@babel/core": "^7.26.0",
    "@babel/plugin-transform-runtime": "^7.25.9",
    "@babel/preset-env": "^7.26.0",
    "@vue/preload-webpack-plugin": "^2.0.0",
    "babel-loader": "^9.2.1",
    "cross-env": "^7.0.3",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "html-webpack-plugin": "^5.6.3",
    "mini-css-extract-plugin": "^2.9.1",
    "postcss": "^8.4.47",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.0.8",
    "thread-loader": "^4.0.4",
    "webpack-dev-server": "^5.1.0",
    "workbox-webpack-plugin": "^7.1.0"
  },
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]
}

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

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

相关文章

DFA算法实现敏感词过滤

DFA算法实现敏感词过滤

DFA算法实现敏感词过滤 需求：检测一段文本中是否含有敏感词。 比如检测一段文本中是否含有：“滚蛋”，“滚蛋吧你”，“有病”， 可使用的方法有： 遍历敏感词，判断文本中是否含有这个敏感词。 …
阅读更多...
索引基础篇

索引基础篇

前言 通过本篇博客的学习，我希望大家可以了解到 “索引” 是为了提高数据的查询效率。 索引的介绍 索引是为了提高查询数据效率的数据结构 索引（index）是帮助MySQL高效获取数据的数据结构(有序)。在数据之外，数据库系统还维护着…
阅读更多...
【设计模式系列】外观模式（十四）

【设计模式系列】外观模式（十四）

一、什么是外观模式 外观模式（Facade Pattern）是一种结构型设计模式，其核心目的是为一个复杂的子系统提供一个简化的接口。这种模式通过定义一个外观类来封装子系统内复杂的操作，隐藏系统内部的复杂性，并向客户端提供…
阅读更多...
哪些因素会影响 DC/DC 转换电路快速测试的性能？-纳米软件

哪些因素会影响 DC/DC 转换电路快速测试的性能？-纳米软件

DC/DC 转换电路在现代电子设备中起着至关重要的作用，其性能的快速准确测试对于确保电子系统的可靠性和稳定性至关重要。然而，有许多因素会影响 DC/DC 转换电路快速测试的性能。 电路复杂性和参数多样性 单片 DC/DC 转换器由于功能模块和参数复杂性&…
阅读更多...
从0开始深度学习（25）——多输入多输出通道

从0开始深度学习（25）——多输入多输出通道

之前我们都只研究了一个通道的情况（二值图、灰度图），但实际情况中很多是彩色图像，即有标准的RGB三通道图片，本节将更深入地研究具有多输入和多输出通道的卷积核。 1 多输入通道 当输入包含多个通道时，需要…
阅读更多...
2025天津市考8日报名，建议收藏好报名流程

2025天津市考8日报名，建议收藏好报名流程

天津市2025年招考2043名公务员公告 35周岁以下（1988年11月至2006年11月期间出生），2025年应届硕士、博士研究生报考的，年龄可放宽到40周岁（1983年11月以后出生）； 报名时间：2024年11月…
阅读更多...
25中海油笔试测评春招秋招校招暑期实习社招笔试入职测评行测题型微测网题型分享

25中海油笔试测评春招秋招校招暑期实习社招笔试入职测评行测题型微测网题型分享

中海油笔试一般采用线上机考的形式。考试时间为 120 分钟，满分 100 分。笔试内容主要包括思想素质测评和通用能力测评两个科目。以下是具体介绍： 1. 思想素质测评： ✅价值观：考察考生对工作、职业、企业等方面的价值观念和态度&…
阅读更多...
使用Docker Compose构建多容器应用

使用Docker Compose构建多容器应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 使用Docker Compose构建多容器应用 引言 Docker Compose 简介 安装 Docker Compose 创建基本配置 运行多容器应用 查看服务状态 …
阅读更多...
【STM32】项目实战——OV7725/OV2604摄像头颜色识别检测（开源）

【STM32】项目实战——OV7725/OV2604摄像头颜色识别检测（开源）

本篇文章分享关于如何使用STM32单片机对彩色摄像头（OV7725/OV2604）采集的图像数据进行分析处理，最后实现颜色的识别和检测。 目录 一、什么是颜色识别 1、图像采集识别的一些基本概念 1. 像素（Pixel） 2. 分辨率&am…
阅读更多...
精心整理教育研究专题数据资源大全-最新出炉_附下载链接

精心整理教育研究专题数据资源大全-最新出炉_附下载链接

教育研究专题数据资源大全V1.0 下载链接-点它👉👉👉：教育研究专题数据资源大全-最新出炉.zip 资源介绍 一、中国教育统计年鉴面板数据 简介：《中国教育统计年鉴》是由教育部发展规划司根据全国各省、自治区、直辖市…
阅读更多...
【论文速读】| PathSeeker：使用基于强化学习的越狱攻击方法探索大语言模型的安全漏洞

【论文速读】| PathSeeker：使用基于强化学习的越狱攻击方法探索大语言模型的安全漏洞

基本信息 原文标题: PathSeeker: Exploring LLM Security Vulnerabilities with a Reinforcement Learning-Based Jailbreak Approach 原文作者: Zhihao Lin, Wei Ma, Mingyi Zhou, Yanjie Zhao, Haoyu Wang, Yang Liu, Jun Wang, Li Li 作者单位: Beihang University, Nany…
阅读更多...
越权访问漏洞

越权访问漏洞

V2Board Admin.php 越权访问漏洞 ## 漏洞描述 V2board面板 Admin.php 存在越权访问漏洞，由于部分鉴权代码于v1.6.1版本进行了修改，鉴权方式变为从Redis中获取缓存判定是否存在可以调用… V2Board Admin.php 越权访问漏洞 漏洞描述 V2board面板 Admin.ph…
阅读更多...
27.旅游推荐管理系统（基于springboot和vue）

27.旅游推荐管理系统（基于springboot和vue）

目录 1.系统的受众说明 2. 系统需求分析 2.1 任务概述 2.2 功能性需求 2.3 非功能性需求 2.3.1正确性需求 2.3.2安全性需求 2.3.3界面需求 2.3.4时间特殊性需求 2.3.5稳定性需求 2.3.6故障处理能力需求 2.4 开发技术简介 2.4.1 开发工具简介 2.4.2 开发技术…
阅读更多...
CCS下载安装（以12.3.0版本为例）

CCS下载安装（以12.3.0版本为例）

Code Composer Studio 是一个集成开发环境 (IDE)，简称CCS软件。支持 TI 的微控制器和嵌入式处理器产品的开发。Code Composer Studio 包含一整套用于开发和调试嵌入式应用程序的工具。 CCS9.3.0及以上版本不需要License文件，但是CCS旧版本比如CCS5.5.0需…
阅读更多...
基于单片机的变频空调系统设计（论文+源码）

基于单片机的变频空调系统设计（论文+源码）

1系统总体方案设计 本次基于单片机的变频空调系统设计，选用STC89C52单片机作为系统的主控核心，结合DHT11温湿度传感器实现家居环境中温湿度数据的检测，并设有自动和手动两种模式，在自动模式下，系统会根据按键设定的温…
阅读更多...
Visual Studio Code从安装到正常使用

Visual Studio Code从安装到正常使用

Visual Studio Code的汉化 下载的Visual Studio Code的话可以去应用商店也可以去官网下载。 Visual Studio Code只是一个编译器，不具备编译器功能。因此需要下载一个编译器MinGW MinGW的安装 官网链接MinGW官网链接 一步到位的链接 添加环境变量 进入cmd界面…
阅读更多...
图神经网络初步实验

图神经网络初步实验

实验复现来源 https://zhuanlan.zhihu.com/p/603486955 该文章主要解决问题： 1.加深对图神经网络数据集的理解 2.加深对图神经网络模型中喂数据中维度变化的理解 原理问题在另一篇文章分析： 介绍数据集：cora数据集 其中的主要内容表示为…
阅读更多...
雪花算法生成的ID在返回给前端之后和生成的不一样，到底是什么原因？

雪花算法生成的ID在返回给前端之后和生成的不一样，到底是什么原因？

一、背景： 最近在做项目的时候发现用雪花算法生成的id传给前端以后跟生成的不一样，就纳闷，在想为什么会出现这样的问题？ 二、问题分析： 最开始以为是序列化的问题导致的仔细对比以后发现前端是后几位不一样都是0&…
阅读更多...
【大数据学习 | kafka高级部分】kafka中的选举机制

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举，这个选举是借助于zookeeper的独享锁实现的，先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息，谁创建成功了谁就是主…
阅读更多...
js例轮播图定时器版

js例轮播图定时器版

要求 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevice-width, ini…
阅读更多...
最新文章

Copyright @ 2022~2023