# webpack-sri-retry

> Webpack plugin for enabling Subresource Integrity and retry load bundle from other cdn/server

Latest version **0.2.1** (published 2021-11-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-sri-retry
pnpm add webpack-sri-retry
yarn add webpack-sri-retry
bun add webpack-sri-retry
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-11-22 |
| First published | 2021-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 27.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Echo Chen |
| Maintainers | echo_fefe |
| Keywords | webpack, plugin, integrity |

## Links

- npm: https://www.npmjs.com/package/webpack-sri-retry
- Repository: https://github.com/devchenyan/webpack-sri-retry
- Homepage: https://github.com/devchenyan/webpack-sri-retry#readme
- Issues: https://github.com/devchenyan/webpack-sri-retry/issues
- npm.io page: https://npm.io/package/webpack-sri-retry

## Dependencies (7)

- [fastparse](https://npm.io/package/fastparse.md) ^1.1.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.6
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^5.8.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.6
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^4.0.0
- [html-parse-stringify](https://npm.io/package/html-parse-stringify.md) ^3.0.1
- [webpack-subresource-integrity](https://npm.io/package/webpack-subresource-integrity.md) 1.5.2

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2021-11-22
- 0.0.3 — 2021-11-02
- 0.0.3-3 — 2021-11-02
- 0.0.3-2 — 2021-11-01
- 0.0.3-1 — 2021-10-29
- 0.0.3-0 — 2021-10-29
- 0.0.2 — 2021-10-29
- 0.0.1 — 2021-10-28

## README

# webpack-sri-retry

基于webpack4的sri（subresource integrity）易用解决方案，参考整合[webpack-subresource-integrity](https://github.com/waysact/webpack-subresource-integrity)、[webpack-retry-load-plugin](https://github.com/hxfdarling/webpack-retry-load-plugin)

- 自动为静态资源js/css添加integrity标识
- 绑定自动从你配置的其它域名 (retryPublicPath) 重新下载那些失败的资源
- 插件必须配合 html-webpack-plugin
- 可以配置监控，支持上报成功和失败的量

## 安装
```
npm install webpack-sri-retry -D

or

yarn add webpack-sri-retry -D
```

## 使用
### combineConfig(`config`, `options`)
合并weback的config，不改变config。通常webapck配置文件中，使用该方法

```
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { combineConfig } = require("webpack-sri-retry");

module.exports = combineConfig(
  {
    entry: {
      index: "./index.js",
    },
    output: {
      filename: "bundle.js",
      publicPath: "https://www.publicPath.com",
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
      }),
    ],
  },
  {
    retryPublicPath: "https://www.retryPublicPath.com", // 重试cdn
  }
);
```

### extend(`config`, `options`)
扩展weback的config，改变config。nuxtjs等框架中使用该方法

```
const { extendConfig } = require("webpack-sri-retry");

module.exports = {
  build: {
    extend(config, ctx) {
      if (ctx.isClient) {
        extendConfig(config, {
          retryPublicPath: "https://www.retryPublicPath.com", // 重试cdn
          ssr: true,
        });
      }
    },
    publicPath: "https://www.publicPath.com",
  }
};
```

## Options
### retryPublicPath
Type: `string`

Default: `''`

自动从配置的retryPublicPath 重新下载失败的资源

如未配置，则资源加载失败后不会进行重试

### hashFuncNames
Type: `array`

Default: `["sha256"]`

如需特别配置参考：https://github.com/waysact/webpack-subresource-integrity/tree/1.x/#hashfuncnames

### ssr
Type: `boolean`

Default: `false`

如需要在服务端渲染项目中使用：

- 需配置`ssr:true`

- 同时在服务端response页面时使用`processedSSRTemplate`方法对html模版页面进行处理（为动态注入的js、css添加integrity及失败重试处理等标识）

```
如在nuxt中，通过hooks对html进行处理：

'render:route'(url, result, context) {
    if (!context.spa) {
      result.html = processedSSRTemplate(result.html)
    }
  },
```

## 上报
入口模版中定义`BJ_REPORT`的report 或 reportFail、reportRetryFail
```
<script>
  var BJ_REPORT = {};
  BJ_REPORT.report = function (data) {
    // 可以上报所有成功失败的资源加载
  };

  BJ_REPORT.reportFail = function ({ src }) {
    // 便捷的首次加载失败上报
  };

  BJ_REPORT.reportRetryFail = function ({ newSrc }) {
    // 便捷的重试加载失败上报
  };
</script>
```

---
_Source: https://npm.io/package/webpack-sri-retry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._