问题标签 [webpack-loader]

我第一次开发自定义 Webpack 4 加载器，我需要访问模块父级的依赖项（我认为称为发布者模块）。

我在文档中找不到有关如何从自定义加载程序内部访问依赖关系图的线索。

先感谢您。

作为一个有趣的项目，我正在制作一个用于创建本地 Web 组件的“框架”。我创建了一个 webpack 加载器，它解析自定义.comp文件中的一些 XML 并导出一个 es2015 类。不幸的是，我找不到.comp在我的打字稿文件中导入这些文件的方法。

我尝试将自定义文件导入常规 javascript 文件，一切正常；我可以看到我创建的加载器正在运行，并且得到了预期的输出。但是当我尝试导入打字稿文件时，我得到了错误Cannot find module 'test/test.comp'。我尝试创建一个空的声明文件并注意到错误消息更改为File '[path]/test/test.d.ts' is not a module

这是我的 webpack 配置：

还有我的 tsconfig.json

我正在尝试将我的 React 应用程序中的某些组件提取到一个单独的可重用组件库中。

我所做的是克隆了这个项目：https ://rinsejs.io/并随后在我的主要项目 package.json 中引用了 github repo

核心项目包json中的入口

react-sharedlib 中的 Webpack.config

共享库中的 Babel 配置：

共享库中的 Package.JSON：

当我尝试构建我的项目时，我收到了这个错误。（这看起来像是 babel 在某些方面的问题，无法引用 JSX 语法或需要配置加载器。任何人知道我在这里做错了什么，或者要尝试什么其他的事情？正如你从我的我尝试安装 Babel 加载器，但无济于事。我想我可能只是在某处遗漏了一个配置，以使其能够识别 JS 文件中的 HTML。

最新版本的 React 顺便说一句。Webpack 4.29.6

更新：**根据下面发布的答案，我的共享库 webpack.config.js 文件现在包含此条目，但遗憾的是没有任何区别。

核心项目.babelrc：

共享项目 .babelrc：

是否可以将文件注册到加载器内部捆绑？

假设我有一个自己的.cmp.html文件加载器，我需要这样的文件：

然后我希望我的加载器也需要“component/index.cmp.js”来捆绑，因此它将被所有适用的加载器解析并出现在最终的 bundle.js 输出中

装载机可以吗？

// 到目前为止的代码，它<StaticComponent name="xyz">在 html 文件中搜索标签，然后将其替换为 xyz 的 html 内容，最后要做的是捆绑 xyz.js

组件/静态/标题/index.cmp.html

组件/静态/标题/index.cmp.js

loaders/static-component-loader.js - 这个加载器需要 html 字符串作为输入，请从下往上阅读

不知何故，我需要将路径中的文件包含componentPathJs到整个包中，然后找到一种在运行时需要它的方法

我在 vue-cli 项目中使用 Vue 2.6.10。我想在这个项目中使用 SVG 加载器来处理来自特定目录的 SVG 文件。这些是我目前的规则vue.config.js

这有效 - 但在所有 SVG 文件上运行。

我已经看到了一些webpack 的包含和排除规则，但我不确定你将如何在这种情况下应用它们。

我正在为filename.xyz.json文件编写加载程序。

现在从 Webpack 版本 2 开始，Webpack 支持开箱即用地加载 JSON 文件。因此，当使用完全自定义的文件扩展名（如.xyz.jayson.

但是因为我正在使用.json另一个，已经存在的加载器在我的加载器施展魔法后被触发，这将导致错误，因为此时它不再是 JSON。我怎样才能防止这种情况？

如果我正确理解了 Webpack文档!!，那么带有内联用法的前缀就可以做到这一点。但我想在配置中禁用后/预加载器。这可能吗？

另外，我正在考虑实际使用给定的 JSON 加载器而不是躲避它，因为当已经有一个加载器时，为什么要自己解析 JSON 呢？但我不太确定这是否可能，因为从 JSON 返回的源已经返回为module.export. 我是否需要剥离module.export然后运行JSON.parse以将其作为实际的 js 对象而不是字符串来使用？

所以作为一个快速的总结：

我想要么根本不触发 JSON 加载器，而是自己解析 JSON 来操作它，或者先使用内置的JSON 加载器，然后自己操作 JSON 数据文件。

为了预处理文件中的一些自定义非 HTML 标签.vue，我曾经（Webpack 3）能够通过插件安装加载器，该插件会将这些自定义标签转换为有效的 html/js 代码，然后 vue 加载器会看到它们并失败。

现在使用 Webpack 4 和 vue-loader (v15) 这似乎不再起作用了。似乎修改了规则（使用他们所谓的VueLoaderPlugin“投手”），这导致我的自定义加载器仍然被调用，但更改后的输出（非 html 标记的替换）似乎没有传递到 vue- loader ( templateLoader.js) 了。

除了上述之外，我无法对此进行任何进一步的调查，因此希望任何人都可以提供任何指示。本质上，我尝试在 vue-loader 开始处理文件之前运行我的客户加载器vue-loader来更改文件。.vue

当我尝试启动我的 react-styleguidist 文档时出现以下错误：

我的webpack.config.js样子是这样的：

我的babel.config.js样子是这样的：

再生产：

static使用关键字的合适的 Webpack 加载器是什么？

我正在尝试创建一个仅解析此语法的内容的加载器：

每个匹配项都应作为 webpack 依赖项从根 webpack 目录添加，而不会对最终内容进行任何更改（CMS 模板需要此语法）

这是我去过的地方：

但目前，该文件没有加载到正确的位置。它实际上是在我的 dist 文件夹中创建的，但仅在 png 扩展文件中包含文本“assets/someimage.png”...

如何二进制加载文件？

谢谢！

使用 WebPack Loader API 时，是否this.addDependency也将文件添加到包中？