3

I have built an npm module. I am struggling to find a way to configure webpack 5 to include module-assets in an app that has the module as a dependency.

Context

What I have is something like:

myNpmModule

dist/
    index.js
    assets/
        image.png

I use the module as follows

// project/app.jsx
import Component from 'myNpmModule'
return <Component />

In this example, <Component /> renders image.png.

When I run this however I have two problems:

  1. image.png is sought at the root directory
  2. image.png is not in the webpack bundle

To get around this issue I have converted all images in myNpmModule to data URL's using the webpack asset module ("asset/inline"). This is an approach I've copied from bootstrap and it works. The problem is the file size of app.jsx, as it includes numerous 1MB+ images.

Similar questions and issues I've found

The question is tied to scss processing, rather than the inclusion of images in .js files. I've read the resolve modules documentation for webpack I couldn't see a way to tie it to a solution.

This effectively copies the assets from node_modules/myNpmModule/dist/assets to your build directory, which is hacky. From what I can tell I'd need to modify myNpmModule to only ever look for assets in that destination directory which doesn't scale.

Recommends you use new URL('./image.png', import.url.meta) to import the images. That doesn't work - or at least the images aren't bundled by the webpack process for project/app.jsx

My questions

One approach I've thought of is to configure webpack to convert data URL's into files during the webpack build process. The view is that these would then be pushed to the build directory.

  1. is there a webpack loader to convert data URL's into files?
  2. is there a better approach?

Unfortunately none of these give satisfactory answers for 3rd parties that will be installing my myNpmModule.

price-visible-announcement
  • 31
  • 2
  • I tend to always use something like Webpack copy plugin that just copies a static assets folder to the dist folder so I can just use images as normal when developing the app and then just move these assets to a static server when publishing the app. I'll configure the host of the static as a `env` variable and then just swap it to the CDN hostname instead of localhost when built with production. Encoded images make bundles heavy so you'll need to learn code splitting (https://webpack.js.org/guides/code-splitting/) to get around that. – Win Oct 15 '21 at 09:00
  • that can work for your own code. But if a third party is installing `myNpmModule` as a dependency it doesn't really as it requires they copy the content from `node_modules/myNpmModule/dist/assets`. It's not something I've seen done in other libraries as it's a bit messy... Also doesn't solve the problem of where `myNpmModule` code looks for assets I don't think – price-visible-announcement Oct 15 '21 at 10:25
  • Which is why code splitting will work because the code will not be loaded at runtime and will only be loaded when needed which will get around the issue where your main app bundle is 1MB – Win Oct 15 '21 at 10:59
  • So I gave it a go, and it does help. Unfortunately if I apply the chunking to `myNpmModule` it doesn't propagate up to the `project` itself. It looks like others are facing this issue too https://github.com/webpack/webpack/issues/10722 – price-visible-announcement Oct 15 '21 at 19:58

0 Answers0