时间戳

首页 > 解决方案 > Webpack 5 - 如何从 npm 模块捆绑资产

javascript - Webpack 5 - 如何从 npm 模块捆绑资产

问题描述

我已经构建了一个 npm 模块。我正在努力寻找一种方法来配置 webpack 5 以在将模块作为依赖项的应用程序中包含模块资产。

语境

我所拥有的是这样的：

myNpmModule

dist/
    index.js
    assets/
        image.png

我使用模块如下

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

在此示例中，<Component />呈现image.png.

但是，当我运行它时，我遇到了两个问题：

  1. image.png在根目录下寻找
  2. image.png不在 webpack 包中

为了解决这个问题，我使用webpack 资产模块（“asset/inline”）将所有图像转换myNpmModule为数据 URL 。这是我从引导程序复制的一种方法，它有效。问题在于 的文件大小，因为它包含许多 1MB+ 的图像。app.jsx

我发现的类似问题和问题

这个问题与 scss 处理有关，而不是在.js文件中包含图像。我已经阅读了webpack 的解析模块文档，但看不到将其与解决方案联系起来的方法。

这有效地将资产从您的构建目录复制node_modules/myNpmModule/dist/assets到了您的构建目录中，这很hacky。据我所知，我需要修改myNpmModule为只在该目标目录中查找无法扩展的资产。

建议您使用new URL('./image.png', import.url.meta)导入图像。这不起作用 - 或者至少 webpack 进程没有捆绑图像project/app.jsx

我的问题

我想到的一种方法是配置 webpack 在 webpack 构建过程中将数据 URL 转换为文件。观点是这些将被推送到构建目录。

  1. 是否有 webpack 加载器可以将数据 URL 转换为文件？
  2. 有更好的方法吗？

不幸的是，这些都没有为将安装我的myNpmModule.

标签： javascriptnpmwebpacknode-moduleswebpack-5

解决方案

推荐阅读