Webpack - Change 'src' path of javascript files in index.html

Question

I am facing an issue after building my strapi application (using webpack).

After i executed yarn build , my index.html imports javascript files using the <script> tag.

The issue comes here, in my build folder, there are all of my files (images, js files etc...), and 0 subfolder.

But inside my index.html, it imports from an invalid path:

<script src="admin/file.js"></script>

I want to change this src with Webpack to look like that:

<script src="./file.js"></script>

Anybody got a solution?

Thank you.

Answer 1

Finally, i found the fix.

I am using Strapi for this web app.

Strapi automatically fills webpack with publicPath "/admin/".

However, webpack doesn't understand and put every files (js, img, html) in the same directory, at the same level (no subfolders).

So inside src/admin/ , remove the word "example" from the file name "webpack.config.example.js"

Open this file and insert this code

'use strict';
module.exports = (config, _webpack) => {
  config = {
    ...config,
    output: { ...config.output, publicPath: './'}
   }
   
  return config;
};