带有 Angular 8 自定义 webpack 配置的 svg-sprite-loader

2024-05-05

我正在尝试使用自定义 webpack 配置将 svg-sprite-loader 包(用于创建 svg sprite)与我的 Angular 8 项目一起使用。

我正在使用以下自定义配置:

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(svg)$/,
                loader: 'svg-sprite-loader',
                options: {
                    spriteFilename: './src/assets/svg/combinedicons.svg',
                    runtimeCompat: true,
                },
            },
        ],
    },
    plugins: [
        new SpriteLoaderPlugin({
        plainSprite: true,
        }),
    ],
};

我在运行 ng build 时收到以下错误:

找不到模块“webpack/package.json” 错误:找不到模块“webpack/package.json”

我无法确定问题出在哪里,是我的配置还是包本身。


您可能需要通过以下方式安装 Webpack 作为显式依赖项npm i -D webpack.

或者您可能安装了 2 个不同版本的 Webpack。

Run npm ls webpack.

你应该看到这样的东西:

user$ npm ls webpack
@my-app /Users/user/my-app
├─┬ @angular-devkit/build-[email protected] /cdn-cgi/l/email-protection
│ └── [email protected] /cdn-cgi/l/email-protection  deduped
└── [email protected] /cdn-cgi/l/email-protection

如果您有不同版本的 webpack,请尝试 npm 安装与该版本相匹配的 webpack 版本@angular-devkit/build-angular依赖性。

如果您在全局范围内安装了 CLI,那么还值得检查您是否在全局范围内安装了多个版本的 Webpack。

我相信你能跑npm ls -g webpack.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有 Angular 8 自定义 webpack 配置的 svg-sprite-loader 的相关文章

随机推荐

  • Pipx 构建包失败

    当我运行命令 pipx install eth brownie 时 我收到以下错误消息 fatal error from pip prevented installation Full pip output in file Users ge
  • 具有基类的唯一 ptr 的类的复制构造函数[重复]

    这个问题在这里已经有答案了 当一个类具有基类的 unique ptr 时 实现复制构造函数的好方法是什么 让我尝试用一 个例子来解释它 struct Base virtual void doSth 0 to make the class a
  • 微软编码标准文档

    Microsoft 是否有可供下载的编码标准文档 我想使用他们的标准 主要针对 C 如果您使用 C 则可以通过运行以下命令在编码时了解 Microsoft 的首选风格StyleCop http code msdn microsoft com
  • Java:如何将ArrayList作为对象的实例变量?

    我正在开展一个班级项目 用 Java 构建一个小型 Connect4 游戏 我目前的想法是拥有一类 Columns 它具有一些整数 索引 最大长度 isFull 作为实例变量 以及一个 ArrayList 来接收上面的整数和每个玩家的表现
  • Async/Await 无法按预期使用 Promise.all 和 .map 函数

    我有很多async我正在使用的功能 但遇到了一个奇怪的问题 我的代码正在运行 如下所示 async mainAsyncFunc metadata let files metadata map data gt this anotherAsyn
  • 计算标签云中标签字体大小的公式是什么?

    我有一个标签云 我需要知道如何更改最常用标签的字体大小 我需要设置最小字体大小和最大字体大小 您可以使用线性或对数评估与某个标签相对于最大标签关联的项目数量 将其乘以最小和最大字体大小之间的差值 然后将其添加到最小字体大小 例如 伪代码中的
  • C++“智能指针”模板,自动转换为裸指针,但无法显式删除

    我正在一个非常大的遗留 C 代码库中工作 该代码库将保持匿名 作为遗留代码库 它在各处传递原始指针 但我们正在逐渐尝试使其现代化 因此也有一些智能指针模板 这些智能指针 与 Boost 的scoped ptr 不同 具有到原始指针的隐式转换
  • CSS - a:访问过:悬停?

    如何应用字体color仅指向已经存在的超链接visited并且正在被hover通过鼠标 本质上 我想做的是 a visited hover color red 是的 这是可能的 这是一个例子 a href http www google c
  • SQL CE 天蓝色连接

    我正在使用 azure 发布 asp net 应用程序 当我在本地发布时 它工作正常 但在 Azure 上 与数据库相关的所有内容都没有显示 并收到 由于发生内部服务器错误 无法显示页面 想知道我的连接字符串是否有问题 http webly
  • 如何从 Android 广播接收器显示对话框?

    理想情况下 我不想启动一项活动来执行此操作 当 WiFi 连接丢失时 我的应用程序需要关闭 因为这对我们来说是一个致命错误 我想显示一条错误消息并让用户按 确定 按钮 然后退出应用程序 解决这个问题的最佳方法是什么 Thanks AFAIK
  • 为什么我无法在 ES6 中导出已声明的函数?

    我读过 MDN 的文档 好吧 主要是新模块功能很好 让我困惑的是一些小事情export 现在 让我们看看 when I export function foo x return x x or export const foo x gt re
  • 正则表达式贪心问题 (C#)

    我有一个像 text 和 text 这样的输入字符串 我想用相应的 html 标签替换 wiki 语法 input text and text 理想的输出 h1 text and h1 text 但使用以下代码我得到以下输出 var reg
  • 获取集合时的 ​​Backbone.js 进度条

    我想在用新内容更新应用程序时显示进度条 我想最好的办法是在集合上调用 fetch 时执行此操作 我获取的内容主要是图像 视频海报等 但我只获取链接 而不是 base64 字符串或大的东西 我想做的是在获取图像链接时用进度条覆盖屏幕 渲染视图
  • 在 nohup 中使用别名

    为什么以下不起作用 alias sayHello bin echo Hello world sayHello Hello world nohup sayHello nohup appending output to nohup out no
  • authContext.AcquireTokenSilentAsync 抛出错误

    我参考了this https github com Azure Samples active directory dotnet graphapi web git 项目 该项目具有用于连接并获取有关用户配置文件的信息的代码 在运行该项目时 我
  • Java 中如何将 long 转换为 int?

    Java 中如何将 long 转换为 int 在 Java 8 中更新 Math toIntExact value 原答案 简单的类型转换应该可以做到 long l 100000 int i int l 但请注意 较大的数字 通常大于214
  • 如何更改散点图色调图例手柄

    下面这段代码使用seaborn生成的散点图如下 ax sns scatterplot x Param 1 y Param 2 hue Process style Item data df s 30 legend full 我想去掉圆圈中的颜
  • 签署程序集“<程序集名称>.dll”时出现加密失败 –“提供程序版本错误”

    我从知名提供商处购买了身份验证证书 现在我想对程序集进行强命名 然后对其进行数字签名 这是我到目前为止所做的 通过运行 sn exe p keypair pfx key snk 从 pfx 中提取公钥 选中项目属性签名选项卡上的 对程序集进
  • 如何显示 pg-search 多重搜索结果的摘录

    我已经在 Heroku 上的 Rails 应用程序中设置了 pg search query fast PgSearch multisearch query gt
  • 带有 Angular 8 自定义 webpack 配置的 svg-sprite-loader

    我正在尝试使用自定义 webpack 配置将 svg sprite loader 包 用于创建 svg sprite 与我的 Angular 8 项目一起使用 我正在使用以下自定义配置 const SpriteLoaderPlugin re