在使用 Webpack 4.x 进行前端开发时，有时会遇到错误提示 Not found Hash: sha256，这是因为 Webpack 4.x 默认启用了 Subresource Integrity (SRI) 功能，但是该功能需要在开发环境与生产环境中分别配置。
SRI 是什么？
Subresource Integrity，即子资源完整性，是一种安全特性，用于保护网站不被恶意篡改。它通过验证子资源的哈希值，确保浏览器只加载被信任的子资源。
解决方法
1. 开发环境
在开发环境中，我们可以禁用 SRI 功能，以避免 Not found Hash: sha256 错误。在 webpack.config.js 文件中添加以下配置：
-------------- - -
-- ---
------- -
-- ---
------------------- ------
--
--2. 生产环境
在生产环境中，我们需要生成资源的哈希值，并在 HTML 文件中添加 SRI 属性。我们可以使用 webpack-subresource-integrity 插件来自动生成哈希值，并添加 SRI 属性。首先，安装插件：
--- ------- ---------- -----------------------------
然后，在 webpack.config.prod.js 文件中添加以下配置：
----- --------- - -----------------------------------------
-------------- - -
-- ---
------- -
-- ---
------------------- ------------
--
-------- -
--- -----------
-------------- ---------- ----------
-------- -----
---
--
--这里我们指定了使用 sha256 和 sha384 两种哈希算法。然后，在 HTML 文件中，我们可以通过 integrity 属性来指定 SRI：
------- ------------- ------------------------------------
其中，sha256-xxxx... 是通过 webpack-subresource-integrity 自动生成的哈希值。
示例代码
在 webpack.config.js 文件中添加以下配置：
-------------- - -
-- ---
------- -
--------- --------------------------
------------------- ------
--
--在 webpack.config.prod.js 文件中添加以下配置：
----- --------- - -----------------------------------------
-------------- - -
-- ---
------- -
--------- --------------------------
------------------- ------------
--
-------- -
--- -----------
-------------- ---------- ----------
-------- -----
---
--
--在 HTML 文件中添加以下代码：
------- ------------- ------------------------------------
其中，sha256-xxxx... 是通过 webpack-subresource-integrity 自动生成的哈希值。
总结
Subresource Integrity 是一种重要的安全特性，可以保护网站不被恶意篡改。在使用 Webpack 4.x 进行前端开发时，我们需要注意 SRI 功能的配置。通过本文的介绍，相信读者已经掌握了如何解决 Not found Hash: sha256 错误，并且能够在项目中正确配置 SRI 功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656f0204d2f5e1655d754968