如何从 webpack 中的资产 url 中删除后缀斜杠“/” |盖茨比

Posted

技术标签:

【中文标题】如何从 webpack 中的资产 url 中删除后缀斜杠“/” |盖茨比【英文标题】:How to remove suffix slash "/" from the assets url in webpack | Gatsby 【发布时间】:2019-07-31 05:55:38 【问题描述】:

我正在从 webpack 生成构建。但是每当它生成一个构建时,它会创建一个index.html 文件以及其他文件,但在index.html 中它会添加带有后缀“/”的script 标签。我想在webpack中添加一个配置,只添加不同资产的文件名而不是后缀“/”

我的 index.html:

<head>
  <meta charSet="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Gatsby 2.1.19" />
  <link as="script" rel="preload" href="/component---src-templates-all-pokemon-js-d59d33d2742ee8d7199e.js" />
  <link as="script" rel="preload" href="/app-a6912420758bcc3e24a1.js" />
  <link as="script" rel="preload" href="/webpack-runtime-65c9ddc0802b64490fd8.js" />
  <link as="fetch" rel="preload" href="/static/d/382/path---index-6a9-UNWMCjcHKgbI17oOwICQKH7zPs.json"
    crossorigin="use-credentials" />
</head>

但我希望每件事都这样。

<head>
  <meta charSet="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Gatsby 2.1.19" />
  <link as="script" rel="preload" href="component---src-templates-all-pokemon-js-d59d33d2742ee8d7199e.js" />
  <link as="script" rel="preload" href="app-a6912420758bcc3e24a1.js" />
  <link as="script" rel="preload" href="webpack-runtime-65c9ddc0802b64490fd8.js" />
  <link as="fetch" rel="preload" href="static/d/382/path---index-6a9-UNWMCjcHKgbI17oOwICQKH7zPs.json"
    crossorigin="use-credentials" />
</head>

我知道我必须更改我的 webpack 配置,但我无法对 Gatsby 中的所有资产文件执行此操作。我想对从浏览器加载的每个文件都执行此操作。

【问题讨论】:

【参考方案1】:

我认为没有任何方法可以删除开头的斜杠,但如果您的 gatsby 站点不是您域的根目录,例如www.example.com/blog/,您可以使用路径前缀。

来自the documentation

使用路径前缀构建站点有两个步骤。

    首先在您网站的 gatsby-config.js 中定义前缀。

gatsby-config.js

    module.exports = 
        // Note: it must *not* have a trailing slash.
        pathPrefix: `/blog`,
    

    然后将--prefix-paths cmd 选项传递给 Gatsby。

    gatsby build --prefix-paths

【讨论】:

我知道路径前缀。我想了解资产。问题是我从一个 S3 存储桶为多个网站提供服务。因此,每当它在资源 url 中找到“/”时,它都会转到根目录,而不是在该特定文件夹中查找资产。我手动尝试从 index.html 中删除所有斜线,但我在控制台上收到一些反应错误,并且资产未正确加载。 为什么多个网站需要一个存储桶? @AlqamaBinSadiq 我不明白。 path-prefix 适用于一切,你能给我们一个不适用的例子吗? pathPrefix 用于 URL 而不是资产。我只想从所有资产 URL 中删除所有前缀斜杠 pathPrefix 不会删除第一个斜杠,但会根据指定目录设置资产 URL:资产 URL 将是 /pathPrefix/assetURL 而不是 /assetURL。但是你必须在构建时知道目录

以上是关于如何从 webpack 中的资产 url 中删除后缀斜杠“/” |盖茨比的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 webpacker gem 访问资产

如何从 webpack 生成的 NPM 包中正确加载资产?

无法从嵌套组件中的资产文件夹加载图像(Vue.js 2.0 / Webpack)

Webpack:如何在 .css 中重写 URL

如何使用 Vue-Loader / Webpack 指向外部(动态)资产

从自定义相册 PHPhotoLibrary 目标 C 中删除图像