问题标签 [webpack-loader]

我有一个使用 vuetify-loader 构建的用于 treeshaking 的项目，它运行良好。我想添加一个像vue-markdown-loader或vmark-loader这样的降价加载器，所以我将它添加到 webpack 配置中：

但是现在 vuetify-loader 停止工作了。它基本上不加载任何组件。
我猜它与vue-loader被使用有关，但我对 webpack 加载器一无所知。

我遇到了一个众所周知的问题，但是没有明确的解决方案：以下 webpack 设置（encore，在 Symfony 中）downloadable font: rejected by sanitizer ...在 Firefox 和failed to decode downloaded fontEdge 中为某些（不是全部！）@fontawesome 字体和 IPM Plex Mono（我通过 npm 安装的）

我已经尝试了所有可以在 stackoverflow、github 和其他网站上找到的东西。不是另一个加载器（url-loader），不是对outputPath的修改或设置publicPath，也没有任何其他帮助。错误保持不变。导入都很好，因为 webpack 没有编译错误。如果没有这部分 webpack 配置，一切都很好。网络服务器正确提交文件并访问 URL，因为它直接下载了一个有效的字体文件。因此，路径和其他任何东西似乎都可以。所以……这里有什么问题？

这些问题出现在 Firefox、Chrome 和 Edge（每个都是最新版本）中。

知道如何解决这个问题吗？

我同时使用 vue 单文件组件，并分别将标记和逻辑.pug与.ts文件分开。如果您对我不统一的原因感兴趣，请参阅评论部分。

问题

在开发构建模式中导出的模板是正确的（为了便于阅读，我对其进行了美化）：

在生产模式下，我的标记已小写。所以，console.log(template)输出：

当然，我的视野不好。

Webpack 配置

评论

老实说，我不知道我们为什么需要?in resourceQuery: /^\?vue/u,（欢迎解释）。但是，在上面的开发构建模式下，configxxxx.vue和xxxx.vue.pug文件都具有工作属性。

我正在使用以下文件命名约定：

• xxx.pug: pug 文件，不会用作 vue 组件模板。
• xxx.vue.pug: pug 文件，将用作 vue 组件模板。
• xxx.vue: 单文件 vue 组件。
• xxx.vue.ts：vue组件的逻辑。需要导出的模板xxx.vue.pug，InputField以防万一。

为什么我需要xxx.vue.ts？因为这：

对于 TypeScrptxxx.vue文件，公共方法/字段和非默认方法均不可见。对于常见的（未应用的）组件，我无法接受。

复制品

GitHub

第 1 步：安装依赖项

第 2 步：让我们先检查开发建筑

在第156行DevelopmentBuild\EntryPoint.js，您可以检查以下 pug 模板：

已正确编译：

第 3 步：生产构建问题

您可以在第13列中找到小写的标签：

您也可以index.html在浏览器中打开并console.log()使用已编译的TestComponent.

有什么方法可以更改使用 Webpack 加载的 Vue 单文件组件的默认语言属性？

我指的是

这是我首选的加载器列表（语言/语言），而且我大多使用相同的加载器。

如何在 Webpack 中设置它，<template>这意味着pug而不是html，然后需要<template lang='html'>？

谢谢

我正在尝试将 Markdown 文件的目录转换为我可以import()在运行时使用的 javascript 文件。我有一个 webpack 加载器，可以将.mdxmarkdown 文件转换为 JSX（然后使用 babel 将 jsx 转换为 js）。

目前它们都作为一个块发出，我不知道如何将它们分成单独的文件。我尝试optimization.splitChunks.cacheGroups了几种不同的方法都无济于事。

我的 webpack 配置看起来像：

以及来自mdx 文档的自定义加载程序文件：

我有一个使用 vue-cli 设置 Webpack 4.43.0 的项目。我正在尝试使用 image-size-loader在构建时获取图像大小。

为此，在我的一个 .vue 文件中，我尝试使用我在项目中安装的自定义加载器加载模块：

当我的项目构建时，它输出以下错误：

该文件存在并且 js/ts/css 文件可以正常解析。我的设置有什么问题？

我正在开发 react js 应用程序并尝试在本地读取 html 文件内容。在特定条件下，我在这样的变量中传递文件 html 数据::

但这给了我错误：

模块解析失败：意外令牌 (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。见 https://webpack.js.org/concepts#loaders

为了解决这个问题，我创建了“webpack.config.js”文件并安装了 webpack、html-loader。我的看起来像这样：

我仍然遇到同样的错误。请帮助或提出一些建议，因为我是 webpack 的新手。

我有这个 > 5 岁的 Angular 1.5.8 项目，由其他人开发，使用 webpack 2.7.0。它目前无法构建。该错误似乎在第一个.css文件中遇到，恰好是angular-material.css：

再往下走，我收到两个警告：

...然后是一堆类似的错误（超过 500 行），其中我只介绍第一个：

我尝试的第一件事是^从 package.json 中的所有依赖项中删除所有组合子，如下所示：

...而且，坦率地说，当我确保使用其依赖项的那些确切版本时，我期待它能够构建。但错误仍然存​​在。

我尝试的第二件事是降级节点。我尝试使用13.11.0（最初）12.18.3、8.11.3和5.12.0.

一般来说，我对 webpack 不是很好，但说到v2.*我完全迷路了。

这是 webpack 的配置：

我花了相当多的时间阅读与 webpack 及其加载器相关的 github 问题，但没有遇到任何可以提示我走向正确方向的东西。

感谢您花时间研究此问题以及您可能提出的任何建议。

在我看来，webpack-loader 和 babel-plugin 的功能是一样的！！

那么能不能帮我解答一下两者的区别，不都是通过AST来操作代码的吗？

我正在尝试遵循使用 Webpack 5.2.0编写加载程序的指南。在页面底部，我们将通过一个简单的 Jest 测试示例进行指导。Jest 测试检查第一个模块对象source属性是否是我们的加载器生成的源。我可以验证我的 Webpack 编译器步骤是否生成了一个name属性为./example.txt. 但source属性始终是'undefined'。尽管stats.hasErrors()返回 false。

我是 Webpack 加载程序开发的新手，我不确定我缺少什么。模块结构描述表明，如果成功，此属性应包含我的模块源。

其他人是否使用最近的 Webpack 版本成功完成了这个场景？