Victor Hugo - Latest version with Webpack

1

Hi everyone,

I’m relatively new to Hugo + Webpack so I think this is likely a Webpack config issue than Hugo but I’m not 100% certain and looking for help.

I just downloaded installed the latest version of Victor Hugo which removed Gulp for Webpack for the build pipeline.

All my blog posts are using the Hugo page bundles feature which has been great.

I have some older blog content I wanted to migrate across that had a custom CSS or JS file linked to the post in the layouts folder (in a custom header.html or footer.html file) but whenever I reference any CSS or JS files in the ‘static’ in my dev environment:

npm run preview

it throws a 404 page. If I view source, and click the link to that custom CSS or JS, it throws a 404 page. But if I click on ‘main.css’, it serves the content.

I believe it might have something to do with the Webpack dev file:
https://github.com/netlify-templates/victor-hugo/blob/master/webpack.dev.js and the CleanWebpackPlugin

How can I reference custom CSS or JS files I place in the ‘static’ folder. Any images referenced in the ‘static’ folder all work okay btw.

Here is a sample of my baseof.html file which links to a custom css file (/css/css-albums/main.css) inside the ‘static’ folder. Linking to the /img/ folder in ‘static’ works fine:

code
code.png802×624 164 KB

2

Can you share your code?

3
4

Disabling this line in the CleanWebpackPlugin seemed to work for the moment

   plugins: [
    new CleanWebpackPlugin([
      "dist/**/*.js", 
      // "dist/**/*.css", 
      "site/content/webpack.json"
    ],
    ),