Webpack 4.x 解决 Not found Hash: sha256-JavaScript中文网-JavaScript教程资源分享门户

在使用 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 文件中添加以下配置：

module.exports = {
  // ...
  output: {
    // ...
    crossOriginLoading: false,
  },
};

2. 生产环境

在生产环境中，我们需要生成资源的哈希值，并在 HTML 文件中添加 SRI 属性。我们可以使用 webpack-subresource-integrity 插件来自动生成哈希值，并添加 SRI 属性。首先，安装插件：

npm install --save-dev webpack-subresource-integrity

然后，在 webpack.config.prod.js 文件中添加以下配置：

// javascriptcn.com 代码示例
const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
  // ...
  output: {
    // ...
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new SriPlugin({
      hashFuncNames: ['sha256', 'sha384'],
      enabled: true,
    }),
  ],
};

这里我们指定了使用 sha256 和 sha384 两种哈希算法。然后，在 HTML 文件中，我们可以通过 integrity 属性来指定 SRI：

<script src="main.js" integrity="sha256-xxxx..."></script>

其中，sha256-xxxx... 是通过 webpack-subresource-integrity 自动生成的哈希值。

示例代码

在 webpack.config.js 文件中添加以下配置：

module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].js',
    crossOriginLoading: false,
  },
};

在 webpack.config.prod.js 文件中添加以下配置：

// javascriptcn.com 代码示例
const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
  // ...
  output: {
    filename: '[name].[contenthash].js',
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new SriPlugin({
      hashFuncNames: ['sha256', 'sha384'],
      enabled: true,
    }),
  ],
};

在 HTML 文件中添加以下代码：

<script src="main.js" integrity="sha256-xxxx..."></script>

其中，sha256-xxxx... 是通过 webpack-subresource-integrity 自动生成的哈希值。

总结

Subresource Integrity 是一种重要的安全特性，可以保护网站不被恶意篡改。在使用 Webpack 4.x 进行前端开发时，我们需要注意 SRI 功能的配置。通过本文的介绍，相信读者已经掌握了如何解决 Not found Hash: sha256 错误，并且能够在项目中正确配置 SRI 功能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656f0204d2f5e1655d754968