umi如何给引入的资源用SRI

Umi（统一前端管理框架）是一个用于构建现代化单页应用的React框架，它支持通过安全资源寻址（Secure Resource Integrity, SRI）来增强应用的安全性。SRI是一种验证加载的资源是否来自预期源的方式，防止恶意替换。在UMI项目中，你可以按照以下步骤给引入的资源添加SRI：

1. **配置Webpack**: UMI基于Webpack进行模块打包，你需要在Webpack配置文件(`umi.config.js`或`.umirc.js`)中启用SRI插件。首先安装`webpack-sri-hash`包：

   npm install webpack-sri-hash --save-dev

2. **添加SRI到loader**: 在Webpack配置的module.rules部分，找到处理JS或CSS文件的地方，添加SRI hash生成规则：

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.(js|css)$/,
           use: [
             'mini-css-extract-text.loader',
             'css-loader?minimize&importLoaders=1&sourceMap&modules&localIdentName=[hash:base64:5]',
             {
               loader: 'postcss-loader',
               options: {
                 plugins: () => [
                   require('postcss-url')({
                     fallback: false,
                     url: (url, { resourcePath }) =>
                       `https://${resourcePath.replace(/\\/g, '/')}?${url}`,
                   }),
                 ],
               },
             },
           ],
           include: path.resolve(__dirname, 'src'), // 或者你的资源路径
           enforce: 'pre',
           options: {
             hashType: 'sha256', // 可选的哈希类型，如'sha256'
             algorithm: 'sha256', // 默认为SHA-256
           },
           generator: {
             filename: '[name].[contenthash].css', // 使用哈希后的文件名
           },
         },
         // 其他loader配置...
       ],
     },
   };

3. **生成并使用SRI标签**: 当你的资源被打包完成后，Umi会自动添加对应的SRI属性到HTML标签里。例如，对于CSS文件：

   <link rel="stylesheet" href="/path/to/file.css" integrity="sha256-abcdef1234567890abcde/fghijklmnopqrstuvwxyz#abcdef1234567890" crossorigin="anonymous">