{"id":24770276,"url":"https://github.com/tengfei5000nian/static-image-use-webp-plugin","last_synced_at":"2026-05-06T07:38:29.647Z","repository":{"id":58920040,"uuid":"530457177","full_name":"tengfei5000nian/static-image-use-webp-plugin","owner":"tengfei5000nian","description":"一个webpack插件，用来为静态图片创建webp格式备份，并判断浏览器兼容动态切换。","archived":false,"fork":false,"pushed_at":"2022-09-23T05:41:27.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-04T22:07:55.688Z","etag":null,"topics":["webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tengfei5000nian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-30T01:40:58.000Z","updated_at":"2022-11-03T03:25:21.000Z","dependencies_parsed_at":"2023-01-18T20:01:57.047Z","dependency_job_id":null,"html_url":"https://github.com/tengfei5000nian/static-image-use-webp-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengfei5000nian%2Fstatic-image-use-webp-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengfei5000nian%2Fstatic-image-use-webp-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengfei5000nian%2Fstatic-image-use-webp-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tengfei5000nian%2Fstatic-image-use-webp-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tengfei5000nian","download_url":"https://codeload.github.com/tengfei5000nian/static-image-use-webp-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245161937,"owners_count":20570690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack","webpack-plugin"],"created_at":"2025-01-29T03:03:57.325Z","updated_at":"2026-05-06T07:38:29.599Z","avatar_url":"https://github.com/tengfei5000nian.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webp plugin for webpack\n\n一个webpack插件，用来为静态图片创建webp格式备份，并判断浏览器兼容动态切换。\n\n\u003e NOTE: Node v10+ and webpack v4+ are supported and tested.\n\n## 关于\n\n在生成图片模块的时候创建webp格式备份（如果webp格式不比原图像小不设置），然后在每个图片模块中引入isSupportWebp模块判断兼容来切换导出的图片扩展名。\n\n## 安装\n\n`npm install --save-dev static-image-use-webp-plugin`\n\n## 使用\n\n```js\nimport StaticImageUseWebpPlugin from 'static-image-use-webp-plugin'\n\nconst webpackConfig = {\n    plugins: [\n        new StaticImageUseWebpPlugin(),\n    ],\n};\n\nmodule.exports = webpackConfig;\n```\n\n## 选项\n\n```js\nnew StaticImageUseWebpPlugin({\n    // 强制使用图片大小最小的方案，不处理webp的兼容问题，只导出一份图片，isSupportWebpModule将不是必须。\n    //\n    // default: false\n    forceMinSize: false,\n\n    // 判断是否支持webp模块路径。\n    //\n    // default: static-image-use-webp-plugin/dist/support.js\n    isSupportWebpModule: 'static-image-use-webp-plugin/dist/support.js',\n\n    // 需要支持webp的图片扩展名数组。\n    //\n    // default: ['png', 'jpg', 'jpeg']\n    includeExtension: ['png', 'jpg', 'jpeg'],\n\n    // imagemin-webp的options，用来生成webp格式图片。\n    // See https://github.com/imagemin/imagemin-webp\n    //\n    // default: {}\n    imageminWebpOptions: {},\n\n    // file-loader的options，当模块不是导出路径时，通过file-loader来emitFile文件，并获取导出路径。\n    // See https://github.com/webpack-contrib/file-loader\n    //\n    // default: {}\n    fileLoaderOptions: {},\n});\n```\n\n## isSupportWebpModule\n\n默认判断是否支持webp的模块。\nSee static-image-use-webp-plugin/dist/support.js\n\n```js\nexport default global.document?.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0 || false\n```\n\n## 生成的图片模块\n\n```js\nimport isSupportWebp from 'static-image-use-webp-plugin/dist/support.js';\nexport default \"test_image.\" + (isSupportWebp === true ? \"webp\" : \"png\") + \"\"\n```\n\n## vue-cli@5 中使用\n\n```js\nconst StaticImageUseWebpPlugin = require('static-image-use-webp-plugin').default\nconst { defineConfig } = require('@vue/cli-service')\n\nmodule.exports = defineConfig({\n  transpileDependencies: true,\n  configureWebpack: config =\u003e {\n    const rules = config.module.rules\n    const imageRule = rules.find(r =\u003e r.test.test('.png'))\n    const imageRuleIndex = rules.indexOf(imageRule)\n    rules.splice(\n      imageRuleIndex,\n      1,\n      {\n        test: /\\.(png|jpe?g)(\\?.*)?$/,\n        type: 'javascript/auto',\n      },\n      {\n        test: /\\.(gif|webp|avif)(\\?.*)?$/,\n        type: 'asset',\n        generator: { filename: 'img/[name].[hash:8][ext]' }\n      }\n    )\n\n    config.plugins.push(\n      new StaticImageUseWebpPlugin({\n        fileLoaderOptions: {\n          esModule: false,\n          name: 'img/[name].[hash:8].[ext]'\n        }\n      })\n    )\n  },\n  css: {\n    // 生产环境中想在style中动态使用切换功能需将extract设成false，否则在提取到css文件时默认不支持webp。\n    // See https://cli.vuejs.org/zh/config/#css-extract\n    extract: false\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengfei5000nian%2Fstatic-image-use-webp-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftengfei5000nian%2Fstatic-image-use-webp-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftengfei5000nian%2Fstatic-image-use-webp-plugin/lists"}