I’m working on a learning project using webpack to build, with the following structure,

Project
  |
  ├── dist/
  ├── src/
  |   ├── assets/
  |   ├── modules/
  |   ├── scss/
  |   ├── app.js
  |   ├── template.html
  ├──  package.json
  ├──  webpack.common.js
  ├──  webpack.dev.js
  ├──  webpack.prod.js

I recently ran into an issue where webpack wasn’t pulling my assets from /src into /dist when running my build script, webpack --config webpack.prod.js.

I found that I needed html-loader to convert the HTML template file to string and pull in the required images and svg’s based on any and tag src attributes.

However, I also have a bunch of content being generated on-demand with JS, such as different icons for items on a carousel.

These items aren’t being pulled into /dist, and I cannot find a suitable loader or method to enable webpack to “see” that these assets are required.

Reading through the html-loader docs, I thought the following loader placed into webpack.common.js might work, but it does not.

module: {
        rules: [
            // ...
            {
                test: /.file.js$/i,
                type: 'asset/resource',
            },
            // ...
        ],
    },

I should note that I have zero problems when running a local webpack-dev-server, as it’s pointing to /src and pulls in my assets. The issue is only faced when building.

Really stuck on this one. Any help would be appreciated.