问题标签 [webpack-loader]

我正在尝试构建一个自定义 webpack 加载器（导入我的 json 文件中指定的所有内容）。

我的第一步是复制一些示例加载器（我选择了文件加载器）并将其注册为我的自定义加载器（在 webpack.config.js 中）：

加载程序被正确拾取，但在加载程序的第一条语句中出现错误：

通过一些实验，我发现它无法理解 ES6 导入语法，而是需要“require('path').

这是为什么？正如我所说，我从 github 复制了文件加载器——效果很好。

有没有办法将 webpack 配置为能够使用 import 语句？

我有一个名为 App.css 的 css 文件，其中包含类似 css

我正在导入这个并在我的反应应用程序中使用

这里styles.abcd正在显示undefined，但是当我控制台时styles，它会在数组上提供具有该类名的对象。我不知道这里缺少什么。

我的 webpack conf 看起来像：

我也试过

没有任何工作。为什么要给undefined？

我正在努力寻找一种“快速”的方式将一些遗留的 javascript 文件从资产转换为 webpack。我（想我）需要找到一种方法来捆绑一组 javascript 文件，只需将它们连接起来，而不是让 webpack 将其包装在 jsonp 中。

我们的平台是在 Symfony 中构建的，使用 twig 模板，我们已经使用资产加载了大部分遗留的 javascript 文件（它只是连接和缩小），我们有与 webpack 捆绑的更新的 javascript/typescript 文件。

自然地，我想删除所有资产依赖并使用 webpack 来捆绑旧的 javascript。但是，由于 webpack 生成包的方式，它被包装在 jsonp 中，并且在这些 javascript 文件中定义的任何函数/变量在全局范围内都不可用。

在资产世界中，我们的树枝文件到处都是：

它将它们全部连接并缩小。我想用类似的 webpack 版本替换它。

我已经确定了一些方法，但我不确定它们中的任何一个是最好的。

1. 用于script-loader让脚本在全局范围内加载 - 由于script-loader使用evalCSP 禁用，因此这是不可能的
2. 重写每个 javascript 文件，在窗口中公开成员。- 这可能是最简单的选择，但我真的不喜欢这个想法，而且它违背了最佳实践。
3. 重写每个 javascript 文件，导出成员，然后使用expose-loader加载文件，然后遍历所有 twig 文件并使用全局命名空间更新对成员的引用。这将花费很多时间，如果可能的话，我宁愿不这样做

我想我可以简单地配置一个 queryParameter 并file-loader加载每个，但我需要每个资源一个脚本标签，并且会失去捆绑性质。（我使用 Symfony webpack 包entries为 webpack 生成一个列表，并提供 twig 函数用于在运行时从 cdn 加载条目）

所以我正在寻找一种将文件连接在一起的方法。创建一个单独的条目文件并将其作为文件加载是不够的，因为无法解析requires/ s。import

我知道webpack-concat-plugin这需要我在 webpack 配置中定义所有各种文件以预先连接，这实际上是不可能的。

我还没有遇到可以用import '@MyBundle/Resources/js/legacy-2.js'该 js 文件的内容替换 的加载器 - 但也许我遗漏了一些东西。

我想知道在所有这些努力之后试图找到一个简单的解决方案是否比重写遗留 javascript 以使用模块的努力更大......

我找到了以下答案，但它们并没有真正帮助我：

• Webpack - 如何将非模块脚本加载到全局范围| 窗口- 这假设我可以定义要预先连接的文件。我有将近 100 种不同的包含使用资产，几乎所有这些都使用不同的文件。
• Webpack - 如何将非模块脚本加载到全局范围| window -eval被我们的 CSP 禁用
• 公开通过 webpack 捆绑的 javascript 全局变量- 正如我所提到的，我真的不想为此创建 100 个“入口”文件，并且webpack-raw-bundler还需要在 webpack 配置文件中预先定义所有内容。

我有一个大项目，其中包含不同类型的依赖项：js、scss、svg、png 等...我的 webpack 已配置并捆绑了我的代码，我对此很满意。

但我想获得我所有依赖项（包括二进制文件和所有文件格式）的某种哈希值。最重要的是：我不想在此期间构建我的代码。为此，例如，我需要所有入口点内的所有文件的数组或至少某种依赖关系树。

我尝试使用编译钩子finishModules，但它在编译后完成。还尝试了一些其他的编译器钩子，不记得到底是哪个。

我尝试编写加载程序，但默认情况下似乎只有高级文件的源代码（如入口点本身）。

我很乐意收到一些方向来解决我的问题。

我正在尝试开发加载程序。我关注 https://survivejs.com/webpack/extending/loaders/！带有 webpack 的文档 [ https://webpack.js.org/contribute/writing-a-loader/] ("Writing webpack loader)!。

我收到以下错误“错误：为 LoaderDependency 创建的模块必须具有属性 _source”！。

这发生在我打电话时this.loadModule。作为第一个参数传递的参数表示 node_modules 包的路径。

这个错误到底是什么意思？

我正在尝试编写一个自定义 webpack 加载器，用于加载演示 javascript 文件及其源代码以用于文档目的。它应该

• 加载指定的 javascript 文件（例如Simple.demo.js）
• 将文件的原始源作为新字段附加到默认导出

完成后，我应该能够在我的 webpack 配置中配置加载程序：

…然后在导入后访问我的演示的源代码：

尝试 1

我已经使用以下加载器成功加载了原始源并完成了命名导出：

这让我做

…但我想将整体SimpleDemo作为一个对象传递给另一个函数，所以我想将它们作为一个块导入（会有很多演示）。

尝试 2

因为我不知道演示文件中用于默认导出的内部变量名称（没有进行完整的 AST 解析），所以我不能只在文件中附加一行来修改它。相反，我尝试编写一个导入和重新导出默认值的包装文件，如下所示：

我希望这个新import指令会被 webpack 解决（我知道这可能会导致无限回归，因为它应该只是根据文件名再次触发相同的加载器）。然而，这似乎没有发生 - 我只是得到

这似乎是因为 webpack 已经构建了它的依赖关系树并且不想向其中添加任何其他内容。我也尝试过使用 arequire()而不是import，这并没有改善问题。

我会以错误的方式解决这个问题吗？我想通过结合其他加载器的输出来使用简单的链接，但 API 似乎没有办法做到这一点。

使用 webpack 编译 React 应用程序时出现错误：

You may need an appropriate loader to handle this file type. <svg

起初这似乎是一个容易解决的问题，但我的问题是我找不到任何与我的用例匹配的答案。我没有svg从带有.svg扩展名的文件中导入

相反，我svg的 s 在 React 组件中：

例子：

图标：

像这样使用：

我找不到任何方法来完成这项工作，我已经安装了大量不同的 svg 加载器并在我的 webpack 配置中实现了它们，但是由于没有实际svg文件，它们都没有工作？

这是我的webpack.config

谢谢

我正在学习 webpack。我读过加载器的执行顺序。它们是从右到左执行的。一个加载器的结果被传递给下一个加载器，这很清楚。但是比我遇到的这样的例子：

这个例子有效。当我们改变加载器的顺序时它有效。我现在不明白。根据文档，第一个加载器应该是'image-webpack-loader'，因为它放在最右边。但是在那如果没有 url-loader，这个加载器不能处理图像，应该有错误。

.vue我正在编写一个将文件转换为 React 组件的 Webpack 加载器：

https://github.com/LukasBombach/single-file-components

一个.vue文件可以由一个<template> <script>和<style>标签组成。作为我实现的一部分，我想强制加载该<script>部分并由 Webpack 对其进行转译以进行进一步处理。所以如果我有这个.vue文件：

我基本上想这样做（用于解释的虚拟代码）：

myLoader.js

有没有办法做到这一点？我发现[this.loadModule][1]，this.callback但如果我这样做：

它确实尝试遍历 js 加载器，但它只是说它找不到.js我正在寻找的文件。如果我这样做：

它实际上并不转译脚本代码，而只是返回它。

我假设我正在做的第二件事是一个很好的领先，但也许我错过了一些东西。

Webpack 提供了一个 TypeScript 接口来实现一个加载器：

所以当我实现它时

现在我正在尝试创建一个接口，即该接口但返回一个 Promise：

注意async

当然我不想复制粘贴那个界面。有没有办法可以扩展（或其他）和修改 webpack 的界面？