如何从 manifest.json 链接一些东西

Question

我正在使用带有 CleanWebpackPlugin 的 Webpack，但我使用的是 index.php。所以 HtmlWebpackPlugin 不是一个选项。我发现了一个名为 WebpackManifestPlugin 的不同插件。这将创建一个包含文件及其哈希的文件，名为 manifest.json。它看起来像这样：

{ "main.js": "css.d915ef.js", "main.css": "main.d915ef.css" }

但是我该如何在脑海中使用它呢？

<link rel="stylesheet" type="text/css" href="dist/main.css">

因为这行不通。

Answer 1

我在 Create React App 和一个 PHP 文件中遇到了类似的情况。

Create React App 配置创建一个asset-manifest.json 文件，其中页面中所需的所有文件都列在entrypoints 键下。

"entrypoints": [
  "static/js/runtime-main.bff00530.js",
  "static/js/2.8bab6741.chunk.js",
  "static/css/main.262e5e5f.chunk.css",
  "static/js/main.e2f4dbf8.chunk.js"
]

在我的代码中，我正在执行以下操作（扩展 @krylov123 的 answer）：

// get the original values
$manifest = file_get_contents("./asset-manifest.json");
$manifest_values = json_decode($manifest, true);
$entrypoints = $manifest_values['entrypoints'];

然后我创建了两个单独的数组：一个用于 css，另一个用于 js 文件。为此，我创建了一个辅助函数 filterPaths（您可以创建自己的）：

// return only paths continaint a specific string
function filterPaths($paths, $value): array {
  return array_filter($paths, function ($filename) use ($value): bool {
    return strpos($filename, $value) !== false;
  });
}

这里我创建了两个数组：

// filter '.css' files
$css_files = filterPaths($entrypoints, '/css/');
// filter '.js' files
$js_files = filterPaths($entrypoints, '/js/');

然后在 html 部分，我循环遍历两个数组，以便为​​ CSS 打印 link 标签和为 JavaScript 打印 script 标签。

这是使用blade的语法，但是你可以将它改编成普通的php：

@foreach($css_files as $link)
  <link href="{{ $link }}" rel="stylesheet">
@endforeach

@foreach($js_files as $link)
  <script src="{{ $link }}"></script>
@endforeach

Answer 2

另一个选项是禁用hash 通过webpack.config.js 文件插入。

您需要找到所有出现的[hash] 并将其从webpack.config.js 中删除。然后使用npm run重新编译一切。

例如，你有

output: {
           path: path.resolve(__dirname, './public/'),
           filename: '[name].[hash].js'
        }

替换为：

output: {
           path: path.resolve(__dirname, './public/'),
           filename: '[name].js'
        }

Answer 3

在 php 脚本中使用该函数

function asset($asset_name)
{
    $manifest = file_get_contents("./manifest.json");
    $manifest = json_decode($manifest, true); //decode json string to php associative array
    if (!isset($manifest[$asset_name])) return $asset_name; //if manifest.json doesn't contain $asset_name then return $asset_name itself
    return "/dist/" . $manifest[$asset_name];
}

它将读取和解析manifest.json 并将"main.js" 替换为"css.d915ef.js" 您可以在生成 html 时使用asset() 函数，如下所示：

<link rel="stylesheet" type="text/css" href="<?php echo asset("main.js"); ?>">

请注意，只有当您的 php 脚本和 manifest.json 位于同一文件夹中时，file_get_contents("./manifest.json") 才能正常工作。如果没有 - 您需要在此处提供 manifest.json 的正确路径。