问题标签 [webpack-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
567 浏览

javascript - Webpack 模块规则测试:匹配包含特定参数的文件

我想将一些特定图像显示为 data-uri 而不是链接到图像位置。为此,我正在使用 url-loader。

这是我的 HTML(哈巴狗模板):

还有我的 webpack 相关配置:

其他图像加载正常,但内联没有。我可以在文件名中使用这些参数吗?

0 投票
1 回答
527 浏览

javascript - Webpack:需要一个合适的加载器来处理这个文件类型错误

我是 webpack 的新手,我正在尝试在我的项目上安装Webpack Bundle Analyzer,但我收到了这个错误。

我正在关注本指南:https ://www.codementor.io/@drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa#7-webpack-bundle-analyzer

这是我的 webpack.config.dev.js:

这是失败的代码:

包.json

我试图了解我缺少什么加载器以及如何添加它?

这半天一直在挣扎。将不胜感激任何投入

0 投票
0 回答
41 浏览

webpack - 有条件地在每个手表构建中单独使用加载器

我的配置中有一个 webpack 加载器,我只想运行它

  • 在观看模式
  • 从第二次运行开始(或任何其他可能随着文件更改触发的每个单独的手表构建而改变的条件)

我已经拥有的:

这将仅在监视模式下触发加载程序,在第一次运行之前检查。

我如何根据可能改变每次运行的条件来包含它?

0 投票
1 回答
107 浏览

angular - Angular 在 AOT 构建中忽略文件加载器

我目前正在尝试在 Angular 中建立一个文档网站。文档将使用 markdown 编写并通过 ngx-markdown 插件显示。在 JIT 构建中一切正常,但 AOT 构建总是会删除降价文件。

这就是我导入文件的方式:

我试过只使用 raw-loader 插件,但这只会在 AOT 上加载null :

然后我尝试设置 webpacks 文件加载器,它将在构建 AOT 时输出void 0 :

但 JIT 看起来像这样:

并在其 dist 中包含此文件夹:
包含 /docs 的 dist 文件夹

没有错误消息或任何内容,它只是完全删除了任何 Markdown 文件存在的证据。

我认为是 Angular 使用的 webpack 配置,但没有任何迹象表明这种情况正在发生。
还有这个问题不是很有帮助。

这是我与@angular-builders/custom-webpack插件一起使用的 webpack 配置:

角.json:

我正在使用 Angular 8。

0 投票
1 回答
740 浏览

configuration - 需要哪个文件加载器以及如何在 Nuxt 中配置它?

我是 Nuxt 的新手,我似乎无法解决以下错误。这种文件类型需要什么样的加载器,在 Nuxt 中的何处以及如何配置它?

0 投票
1 回答
2478 浏览

javascript - Webpack 加载器错误:您可能需要额外的加载器来处理这些加载器的结果

添加react-hot-loader到 Webpack 配置后,将出现以下错误。

loader./add-react-hot-loader-to-source源码如下:

0 投票
2 回答
7371 浏览

javascript - html-loader 的用途是什么以及它在 Webpack 中是如何工作的

我在学习 webpack 时遇到了loaders,它的定义loaders说它会转换你的代码,以便它可以包含在 javascriptbundle中。

但是,html-loader 是如何工作的?

定义说它将 html 导出为字符串(这html-loader是什么意思)。

它还说每个可加载的属性(例如<img src="image.png"导入为require('./image.png'),并且您可能需要在配置(file-loaderurl-loader)中为图像指定加载器,这是什么意思。

我想知道,html-loader 到底做了什么。它是转换html为 String 还是只是将img标签转换为require. 这一切如何协同工作。

谁能详细解释一下。

0 投票
1 回答
75 浏览

javascript - css loader如何解析webpack中的资源

我正在学习 webpack 中的 css-loader,定义说

css-loader 解释@importurl()喜欢import/require()并将解决它们。这是什么意思,在文档中的一个例子中有

url(image.png) => require('./image.png')

所以我的问题是它会转换url('./image.png')require('image.png')

例如,在 css 文件中,如果我的背景属性为

将上述样式转换为

如果这是转换的background:require('./image.png')方式而不是无效的 css,我的理解是否有问题,可能是我没有得到 css-loader 的实际作用。我浏览了 css-loader 的文档。

谁能解释我错在哪里。

0 投票
1 回答
113 浏览

javascript - css loader如何解释css中的@import和url()

如何css-loader解释 css 中的 @import 或 url()

例如,如果我在(index.js)模块中导入(Style.css)

我的(Style.css)文件,如果我有

所以,当 webpack 看到in模块import时,如何解释背景属性的语法。将转换为.Style.cssindex.jscss-loaderurl()url('./image.png')require('./image.png)

例如将

转换成

因为在文档中有解析示例,例如:

url('./image.png') => 要求('./image.png')

所以,我想知道整个url('./image.png')语法是否被替换为require('./image.png'). 如果是这种情况,则backgroundwithrequire()不是有效的css语法。

解释url()为是否require()意味着将其转换为require()其他内容。

0 投票
0 回答
89 浏览

webpack - 在加载器中要求它之前使用 Webpack 编译 JS 模块

我正在为 Webpack 编写一个加载器,它的一个选项是一个包含 js 文件路径的字符串。然后在我的加载器中需要这个 js 文件,因为我需要从中获取一些数据。问题是我希望 webpack 在我的加载器需要它之前编译这个 js 文件。这样做的原因是我需要 js 文件中的图像,并且我想使用 webpack 的 require 而不是 node 的 require,以便获得该图像的路径。

一些代码可能会有所帮助

装载机:

文件.js

这不起作用,因为当我执行require(options.data)节点加载file.js时,当它尝试require('@/assets/my-image.png')节点时会抛出错误,因为很明显,它找不到模块@/assets/my-image.png

我可以loadModule用来获取已处理的源代码,file.js但我不知道如何在请求参数中指定 javascript 加载器或类似的东西loadModule

file.js在我的模块中需要它之前,如何让 webpack 编译?这甚至可能吗?如果没有,有什么解决方法吗?