问题标签 [webpack-file-loader]

我正在开发一个用于多个客户端站点的应用程序。它们作为子域或路径（我无法控制）托管，如下所示：

1. https://application.example.com/#/example-page
2. https://example.com/application/#/example-page

这是我的 Webpack 1 配置：

有了这个，我的资产被编译到一个/build/文件夹中，该文件夹还包含主应用程序 JavaScript 文件：

我遇到的问题是，如果应用程序托管在预先存在的路径（上面的 URL 示例 2）上，则找不到已编译的资产，但如果不存在路径，则加载得很好。进行一些调试表明，无论出于何种原因，都必须指定/build目录才能在第二个 URL 示例上加载资产，但指定/build会破坏第一个 URL 示例：

1. https://application.example.com/compiled-asset.png ✓
2. https://example.com/application/compiled-asset.png ⇐ 404
3. https://application.example.com/build/compiled-asset.png ⇐ 404
4. https://example.com/application/build/compiled-asset.png ✓

我在这里做错了什么？

我已经构建了我的第一个完整的 React 应用程序，它运行良好。我加载了我的开发服务器，一切都完全按照我的希望加载。值得注意的是，我的图像文件加载完美。

在我的开发服务器上成功加载图像的示例：

运行开发服务器时，当我在控制台中检查此元素并转到“源”时，我看到的文件树如下所示：

这是我所期望的。

但是，在运行生产服务器时，图像无法加载。当我检查元素并转到“来源”时，我看到的是：

所以我的生产版本显然/img/sq完全忽略了该文件夹。

我听说过 file-loader 和 url-loader，但我还没有找到一个清晰简单的解释来说明它们的作用以及如何使用它们。我已经成功地安装了我的依赖项，并且我已经将此加载程序添加到我的 webpack.config.js 文件中：

这样做之后，我不确定这应该如何改变图像的加载方式。我应该更改引用图像的方式吗？任何帮助/指针将不胜感激，因为这让我很难过。

更新：

这是我的 server.js 文件。我看不出您发布的代码与我自己的代码之间有任何根本区别，除了我使用res.render方法，您的res.sendFile.

这里有什么我可能错过的吗？

服务器.js

我正在使用 webpack 模块捆绑器制作一个 angular2 应用程序。现在我添加了文件加载器，用于加载 jpg、gif、png 等图像文件。但是当我运行构建命令时，图像文件没有被捆绑。这是我的配置：

webpack.config.js （仅图像加载器配置）

我在我的 html 模板中包含了来自文件夹的图像，如下所示：

在我的 CSS 中：

但是当我构建整个应用程序时，图像并没有像我在 webpack 配置中指定的那样放在 assets 文件夹中。

现在最奇怪的是字体使用相同的配置，并且它们是在资产文件夹中创建的。这是我在 style.css 中包含字体的 CSS：

运行构建后，可以在 assets 文件夹中找到此字体的所有文件，如 svgs、ttf、woff 等。

谁能告诉我为什么没有在资产文件夹中创建图像，而是使用相同的配置/加载器创建字体文件。

如何更改使用 file-loader 复制的文件的输出目录？

配置 ：

• 如果我使用 [路径]，则输出 = 完整的源目录。
• 如果我不这样做，则 output=files 位于根输出目录中

如何只保留初始路径的一部分？

例子 ：

我在使用 webpack v2 和文件加载器加载字体时遇到问题。对任何字体文件使用 url-loader 一切正常。但是，我想使用文件加载器，以便我们可以缓存字体文件，而不是将所有图像和字体存储在捆绑的 js 文件中。

我正在使用 webpack v2、css-modules 和 postcss（和 postcss-loader）。

为了让事情变得简单，我在 global.pcss 样式表中定义了@font-face，它包含在我的主 index.jsx 文件中。（这是调试此问题时的临时措施。通常所有@font-face 声明都在单独的文件中）

在我的 index.jsx 文件中，它是 webpack 的应用程序入口点，我导入了 global.pcss 文件

global.pcss 文件中的所有其他样式都已正确应用。

我的 webpack 配置看起来像这样的字体

如果我将上面的文件加载器换成 url-loader 字体加载正确。使用文件加载器，当我构建项目时，我可以确认文件加载器创建了正确命名的字体文件并将其移动到我的 dist 文件夹，但我的项目加载的是漫画 sans 而不是 Proxima Nova，eww。

我不知道如何继续调试。任何帮助将不胜感激。

当我require('./something.html')在我的代码中执行并配置文件加载器以加载 html 文件时，如下所示：

目前这会将原始文件复制到配置的输出目录并替换require对这些文件名的调用替换为生成的文件 url。效果很好。

我想知道是否有可能以某种方式进一步处理文件，例如使用任何其他加载器进一步缩小或优化。或者也许使用任何钩子或类似方法以某种方式处理它们以进行优化。不知道webpack提供那种钩子。

有什么解决方法可以做到这一点file-loader吗？

我尝试过这样的事情，但它似乎不起作用。它不是缩小的。

让我知道是否有人使用 webpack 2 对此有任何解决方法。谢谢。

注意： 我知道有html-webpack-plugin用于生成index.html这不是我想要的。我在 Angular js 1.x 项目中工作，我需要file-loader在其中使用许多模板 html 文件templateUrl来动态加载它们，这些文件已经很好用了。现在我只需要缩小那些输出模板文件。

我刚刚升级 nywebpack.config.js以与 Webpack 2 兼容，现在我的 Glyphicons 不再被发现。

这是从确实有效的旧 Webpack 1 配置的摘录

这是不起作用的新型 Webpack 2 配置。

这与以前相同，因此sass-loader可以正常工作，并且我确实/dist/css/fonts/在构建生产版本时看到了字体，但是我使用webpack-dev-server的开发版本没有像以前那样在浏览器中提供字体我得到一个 404http://localhost:8080/css/fonts/glyphicons-halflings-regular.woff2

我已将所有依赖项更新为最新版本。

可能与 Webpack 2、Sass 加载器和 Webpack 开发服务器有些不兼容？

我目前正在尝试将现有项目合并到 webpack 2。我目前正在努力解决的问题之一是文件加载器。通常你会期望它从<img>和background-image源中获取所有图像文件，然后将它们放在你的 dist 文件夹中。

这目前在我的 webpack.config.js 中

运行 webpack 命令后，我的 dist 文件夹有一个 images 文件夹，它只包含 PNG 文件。由于某种原因，所有其他文件都被忽略了。

我现在为此苦苦挣扎了几天，我找不到合乎逻辑的解释为什么会发生这种情况。

我在我的样式表中使用图像（更少）很好：

使用 HMR 时，它们被 base64 编码到我很好的样式表中。但是，在为生产进行编译时，我希望图像不要嵌入到样式表中。我已经尝试过url-loader和file-loader。

使用 url-loader 我无法让它正确地发出图像。如果我没有设置限制，那么文件将被发送到output/images/并具有正确的大小，但不是有效的图像。如果我将限制设置为小于 8k 的图像，则会发出output并纠正图像。

在任何一种情况下，发出的图像都会像这样出现在 CSS 中（例如使用 url-loader 时limit=1）：

url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);

当你解码它是：

如何让 css 使用 URL 而不是尝试对值进行 base64 编码？

这是我的 webpack（仍在 webpack 1 上）加载器配置：

更新：原来禁用less-loader会在使用 url-loader 时停止对 URL 进行编码（但图像仍然无效），但在使用 file-loader 时不会。

更新 2：在加载器末尾添加了一个自定义加载器，css!less!postcss并且源仍然具有的图像 URL，../images/foo.png因此看起来问题更进一步。还尝试删除ExtractTextPlugin但为图像编译的 JS，然后像 CSS 一样具有用于导出的 Base64 编码值。

我是 vuejs + webpack + electron 的新手，我正在使用这些工具开始一个新项目。

我很难在我的标签中检索到我的资产的路径。

我的项目结构如下：

我的 webpack.config.js 看起来像：

在文件 componentA.vue 中，我尝试执行以下操作：

但我有以下错误

浏览器尝试加载 file:///logo.png （这是错误的，因为它不是我的资产的完整路径，它错过了 my-project 目录的整个路径）所以我试图将我的资产放在输出 /dist没有结果的文件夹（但我不确定我做对了）。

你能帮我解决这个问题吗？非常感谢 ！