问题标签 [webpack-loader]

我有一个 Node 脚本，它fs.readFileSync多次读取文件系统上存在的各种 JSON5 配置文件。根据 ENV 变量中的某些标准，这些被读入、组合、操作、附加等。该文件的输出是一个 JavaScript 对象，通过module.exports.

我希望每次运行 Webpack 构建过程并在捆绑包中提供可用的输出 JS 对象时评估此脚本，因此当我的客户端 React 脚本执行时import { foo, bar } from 'config';，客户端代码可以访问这些值。

这似乎是加载程序可以解决的问题，但我无法让它们中的任何一个工作。

如何在 Webpack 编译期间评估 Node 脚本并使其导出可用于编译的客户端代码？

<img>在我的 vue-cli 项目中，我需要在-tag中引用一个 svg 文件。这样可行。

现在在这个 svg 文件中，我有一个<image xlink:href="...">- 而且这个路径没有被 webpack 触及或解析。

例子：

现在的问题是，我如何告诉 webpack 解决这个 svg 文件中的路径？

可能的解决方法： * 放入并在 * use inline- arcade-bg-4.jpgin中/public引用 thisxlink:href<svg>MyComponent.vue

但我想保留<img />-tag 并保留 vue-cli 的文件散列功能。

背景：我使用此设置来实现（相对）跨浏览器就绪的剪辑蒙版，使用 a.jpg而不是 a .png，它更小且性能更高。

有没有办法在 Webpack 尝试获取资源之前转换 Webpack 中资源的文件路径？

我的 JS 模块需要从node_modulesBootstrap 的下拉列表中导入标准库：

我无法复制这些库，对重复项执行转换并将其另存为新文件以满足我的需要。我几乎有一个对内容进行转换的 Webpack 加载器，但我需要一种通用的方法来在我的模块中标记这些文件。

所以我决定在我的模块中使用不存在的扩展来引用它们，例如：

然后引用这个扩展webpack.config：

但是 Webpack 抛出：这意味着它会在我切断加载器、获取正确的文件并进行转换Module not found: Error: Can't resolve 'bootstrap/js/dist/dropdown.js.newextension'之前尝试获取文件。.newextension

那么，在 Webpack 尝试获取资源以将路径转换为文件之前，我该如何进入 Webpack 的进程呢？

在 webpack 插件中的某个加载器完成其工作后，我正在尝试获取加载器转换的文件内容。这对于另一个加载器来说通常是理想的，但我还需要访问在翻译过程结束时调用的钩子（因此选择编写插件）。我是否需要一个不同的钩子，emit以及可以访问转换后的文件内容的参数的属性是什么？

我正在使用 webpack 3，但我应该能够从 webpack 4 解决方案进行翻译。

我们有一个使用 angular 创建的代码库，它使用 angular cli 和它的默认 webpack 配置。然而，我们开始从 Angular 转向 webcomponents。为了在我们的 webcomponent ts 文件中使用 scss，我们创建了一个新的 webpack 加载器，我们在其中添加了正确的 scss 文件作为依赖项，等待从 sass-loader 编译的 css 并使用字符串替换将其插入到我们的 ts 文件中。

这在正常的 webpack 环境中运行良好。但是，Angular 也通过使用几个不同的加载器来处理 scss 文件。因此，scss 文件不再包含实际的 scss，而是 javascript。这对于我们的其他 scss 文件仍然是必需的，但对于以 .webcomponent.scss 结尾的文件则不需要。

如何告诉 Angular 停止为我的 *.webcomponent.scss 文件使用它的默认加载器？

我的 extra-webpack-config.js 看起来像这样：

我的 angular.json 具有以下自定义 webpack 配置：

在我使用的 webcomponent-loader 中

这给了我以下错误：

这告诉我 Angular 将其转换为 js 代码。任何帮助是极大的赞赏。

我正在学习 webpack-loader，并使用 csv-loader 加载 csv 文件。 我已经安装了 csv-loader 并添加了规则。但是，webpack 会记录一个

错误：找不到模块“papaparse”。

这个错误是怎么发生的？

我是 webpack 的新手，在尝试解决子依赖项时遇到了问题。

我正在导入一个dependency试图从特定文件夹（而不是 node_modules）中需要一个模块的模块（我们称之为它subdependency）。该文件夹包含两个文件：

subdependency/package.json

subdependency/build/Release/addon.node

subdependency/lib/src/index.js（这个 index.js 需要 addon.node）

我正在使用 webpack，并且在导入我的依赖项时找不到subdependency.

子依赖项存在，但无法访问。我添加了一个加载 .node 文件的加载器https://www.npmjs.com/package/native-ext-loader，但它仍然无法正常工作；试图确定发生了什么我在构建中修改了从 ./subdependency 到 ./subdependency/build/Release/addon.node 的需要路径，并且该文件是可访问的（所以我猜本机 ext 加载器工作正常，但它不是加载其他文件，如 index.js）。

我认为问题在于 webpack 无法理解 ./subpdendency 是一个模块，或者我没有正确加载它。

欢迎任何建议或想法！

我svg-sprite-loader在尝试从 svg sprite 文件加载图标时使用该插件，但是，页面失败并出现 webpack 错误“未定义导出”。会发生什么？如何调试这样的 webpack 加载器并获得更多相关的错误消息？

除了适应反应外，我遵循了本教程。

我得到的错误是：

这是所有代码：

组件代码

输出这个反应代码

以及生成的 JS

Webpack 配置

图标精灵文件

与标题所暗示的差不多。我想在项目中的每个 javascript 文件旁边创建一个元数据文件。所以我需要一个完全不改变内容的 webpack 加载器，只提取一些元数据并将其写入文件。最好的方法是什么？fs.writeFileSync似乎工作正常，但我不知道是否应该使用它，因为似乎一些 webpack 指南建议使用memory-fswebpack 的内存文件系统。