Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove suffix slash "/" from the assets url in webpack | Gatsby

I am generating a build from webpack. But whenever it generates a build it creates an index.html file along with other files but in the index.html it adds script tags with the suffix "/". I want to add a configuration in webpack to just add the name of the files of different assets instead of the suffix "/"

My 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>

But I want it like this for each and everything.

<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>

I know that I have to change my webpack configurations, but I am unable to do that for all the asset files in a Gatsby. I want to do it for each and every file I am loading from my browser.

like image 705
Alqama Bin Sadiq Avatar asked Oct 17 '22 05:10

Alqama Bin Sadiq


1 Answers

I don't think there is any way of removing the beginning slash but if your gatsby site is not the root of your domain, for example www.example.com/blog/ you can use path prefix.

From the documentation

There are two steps for building a site with path prefixes.

  1. First define the prefix in your site’s gatsby-config.js.

gatsby-config.js

    module.exports = {
        // Note: it must *not* have a trailing slash.
        pathPrefix: `/blog`,
    }
  1. Then pass --prefix-paths cmd option to Gatsby.

    gatsby build --prefix-paths

like image 172
Cyril Durand Avatar answered Oct 20 '22 16:10

Cyril Durand