问题标签 [webpack-file-loader]

我的项目文件结构：

我有以下用于文件加载器的 webpack 配置条目：

我的 scss 文件引用了字体文件：

如果我去 localhost:{port}/webpack-dev-server 字体文件不存在。webpack-dev-server 的输出也没有显示任何与我的字体文件相关的内容。

文件加载器不应该向 webpack 提供字体文件的副本吗？

如何使用文件加载器保存完整的图像路径？

我的装载机配置文件

图像路径src/images/1.jpg and src/images/section/2.jpg

在生产中，我dist/images/1.jpg得到dist/images/2.jpg

我试图改变为use: [ 'file-loader?name=[path][name].[ext] ]

但是开始dist/src/images/1.jpg生产dist/src/images/section/2.jpg

如何更改加载程序设置以开始生产dist/images/1.jpg和dist/images/section/2.jpg？

谢谢

我正在研究 Webpack 来构建我的模块包。我使用文件加载器在 javascript 中加载图像文件。这些行用于加载图像文件：

但我有麻烦。图像路径未按预期在 css 中编译。我的应用程序具有结构：

图片由app/views/index.pug 中的require()加载：

和背景图像： app/styles/style.css 中的url() ：

====== 编译后build/index.html中的图片路径为：

但 build/css/style.css 中的图像路径是：

如何检测文件加载器何时扫描 html 或 css 中的图像？或者有什么办法可以解决这个问题？

谢谢你。

我正在为我的 PHP 和 React 项目使用 webpack。我想使用 webpack 文件加载器从我的 .scss 文件加载背景图像，但由于某种我不知道的原因，img-folder 不会被复制/导出到我的dist-folder。下面是 webpack.config.js：

我也尝试过loader: 'file-loader?name=/dist/img/[name].[ext]',，但没有运气。

我的文件结构是这样的：

然后在我的.scss我尝试了这个：

有谁知道这里有什么问题？

我正在将 webpack(3.6.0) 用于同构反应应用程序，并且除了我的 css 文件中的背景图像外，一切正常。所有其他样式都有效，图像正在按预期在我的本地计算机上输出到我的 /dist 文件夹，如果我检查，我会在 localhost 的浏览器中看到正确的文件路径......但是如果我去开发工具中的源/dist/client 下这些静态文件的整个目录丢失。我正在尝试找出同构渲染，所以老实说，我对服务器与客户端渲染舞蹈方面发生了什么只有一点了解，而且我承认我的头脑并没有完全围绕 webpack 配置。到目前为止能够解决我的问题，但这让我真的很难过，任何见解都将不胜感激！

计算机 /dist 文件夹：

浏览器来源（测试 w/chrome）：

目标 DOM 元素背景样式：

webpack.config.js（客户端）：

webpack.config.server.js（服务器）：

css 文件：

outputPath在尝试使用文件加载器选项构建 AOT 构建时，我遇到了一个问题。结果输出是一个<img>用引号 ( "<img src=images/world.png alt=world />") 包围的标签。

这只发生在我的 AOT 构建中，而不是我的 Dev 构建中。所以我猜文件加载器在它的编译周期中被切断并插入了结果字符串。

版本：

webpack.common.js | 规则部分

webpack.prod.js

这是一个错误还是我做错了什么？如果它是一个错误，它在哪一边是错误，@ngtools/webpack或者file-loader？

任何帮助表示赞赏！

我的 app.html 供参考

输出：

更新

这似乎是 Angular 的 AOT 编译器中的一个错误。所以我在 GitHub 上做了一个 Bug 报告。下面的评论中有一个解决方法，但如果能修复这个错误，那就太好了。

我应该通过导入相对路径还是通过引用文件 URL 在节点中加载照片，以及如何正确地从它们的相对路径加载照片？

目前我正在使用 express 提供静态文件：

并通过引用文件 URL 加载照片：

我有一个 webpack 配置设置为在 (png|jpg|gif) 上使用文件加载器，并且 webpack 文档说，使用文件加载器，您可以从相对路径 ( https://webpack.js.org ) 导入照片/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx）：

使用此配置（这是我正在使用的配置）：

但是，当我尝试从其相对路径导入图像时：

我收到此错误：

/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590 抛出错误；^

语法错误：/Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg：意外字符“�”（1:0）

1 | ����

但是，如果我发出“从相对路径导入”，启动我的服务器，然后将相对导入添加回来，图像将从其相对路径加载。但是，如果我重新启动服务器，则会再次引发错误。

因此，我改为引用文件 URL 来解决此错误，但我不确定如何使用我的 webpack/node 配置从它们的相对路径正确加载文件。

目前，我正在运行 node v8.6.0、webpack v3.6.0、express v4.15.4、file-loader v1.1.5 和 react v16.0.0。

我是 webpack 的新手，我似乎找不到使用 webpack 在 / 下提供 Apple Universal Links 文件的方法。

您能否建议如何让 /apple-app-site-association 工作？

我有一个关于 webpack 和服务图像的问题。

我有一个构建 React webapp 的 webpack 配置，还提供来自特定文件夹的 .jpg 文件。

但是，如果我从我的 web 应用程序下载并将新图像添加到此文件夹会发生什么？

我可以刷新 webpack 以便它提供新图像并且我可以使用 导入它require.context吗？或者，这是不是 webpack 不应该做的事情，所以我需要在后端处理这个？

谢谢，

我有一个使用带有一些文件加载​​器规则的 webpack 的 React 项目。我试图在我的 React 组件（JSX）中导入/需要一个图像，如下所示：

在 macOS 计算机中，它会引发此错误：

令人惊讶的是，当我尝试在 Windows 7 计算机上运行该项目时，它运行良好！

这是我的 webpack 模块对象：

有人可以帮我解决这个问题吗？