问题标签 [webpack-file-loader]

我一直在尝试使用 webpack 加载图像，但不知何故它不起作用。这是相关代码

这是应该加载图像的组件的一个示例

但是当页面加载时，我得到

在网络选项卡中，我看到图像的类型为 text/html，（不知道为什么），我看到启动器为 DOMLazyTree。那么，你能告诉我这里出了什么问题吗？

我正在尝试将一些字体包含在一个组件库中，我将作为一个使用 Webpack 生成的 UMD 包分发并作为 NPM 模块安装；组件使用这些字体。问题是指向生成包中字体的 URL 不正确，并在运行使用该库的应用程序时导致 404。

例如，resolve-url-loader将输出"/myfont.woff". 但当然，该文件实际上在应用程序中的该 URL 上不可用，除非使用它的应用程序进行一些配置以复制该文件并在预期路径上提供它。

font-face: 'My Font'当应用程序从我的库中导入一个组件时，有没有办法自动使这些字体可用（即可以工作），从而最大限度地减少使用它的应用程序所需的配置量？

对于大文件，我不想使用url-loaderBase 64 编码，也不能使用 CDN。

我正在制作一个注入内容脚本的 chrome 扩展。我不希望 webpack 处理内容脚本。

我的目录结构：

这是我调用 webpack 的 gulp 任务：

我想将目录结构保留在构建目录中，而不是让里面的文件content/被解析，即。使用file-loader

但它们只是被解析，我pre的内容脚本规则被忽略了。

我想通过file-loaderwebpack 加载我的 svg。这甚至可能吗？如果可以，我该怎么做。

webpack.config.js

我正在使用 Webpack 在我的 HTML、CSS 和 JS 上加载图像。

我的配置是：

我的项目文件夹结构：

我只想引用来自 HTML、CSS 和 JS 的图像（至少在 JS 中的图像位置），但目前我所有的图像路径都是相对于图像文件夹到模板文件的。

在这种情况下，为每个 HTML 和 JS 文件配置路径就像地狱一样。

所以我的问题是：我怎样才能拥有通用路径，以便在 HTML、JS 或 CSS 中使用 - 我将只在任何文件中引用图像名称，通用路径将在图像文件夹中找到它。

非常感谢您的帮助！

从不同路线获取相同的捆绑图像时遇到错误

当我的应用程序在路由中时http://localhost:8080

我的图片从 url 完美加载http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg

但是当我的应用程序路线更改为http://localhost:8080/dashboard

我的图片也从 url 加载http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg

由于图像位于 url 位置http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg ，因此404 resource not found在从给定位置获取资源时显示错误。

我正在使用 require('../image.jpg')在我的应用程序中添加图像。

这是我的webpack.config.js文件。

我正在使用 webpack 版本：“^3.1.0”。

在 React 上存储本地资产非常新。

我已经使用 file-loader 和 image-loader 配置了 webpack，并将图像存储在本地，但由于某种原因，它似乎没有显示：

webpack.config.js

FWIW，我根本没有收到任何错误，只是图像似乎没有加载。

非常感谢任何帮助！

我有 2 个不同的图片文件夹。

-src /assets/img/img1.png
-src/content/media/img2.png

dist 目录输出这个： -dist
/img1.png
-dist/img2.png

但是应该是这样的： -dist
/assets/img /img1.png-dist/内容/
媒体/img2.png

我必须改变什么，因为它有效？

我目前正在尝试向nunjucks-isomorphic-loader. 这里的目标是允许在模板中使用 require 语句，以便 webpack 加载和捆绑它们。它还必须使用html-webpack-plugin

因此，在阅读了有关模块依赖项的 webpack 文档后，我选择在模板中使用以下语法：{{ require('path/to/asset.jpg') }}因为它是有效的 nunjucks 语法，考虑require到宏。

然后我开始在 loader 上进行一些编码，并以以下修改结束：

从 ：

至 ：

所以在这里我只是简单地获取模板内容来用实际需要替换 require 语句，这样 webpack 就会加载资产。

但问题是：将它与 html-webpack-plugin 一起使用似乎并没有使用我在webpack.config.js.

这是我的测试配置：

index.js 是空的。

测试.njk：

webpack.config.js：

这是我在构建 webpack 时遇到的错误：

显示它.jpg“按原样”导入文件，而不是使用file-loader我在 webpack 配置文件中定义的。

所以，我被困在这里，我什至不确定我试图完成的事情实际上是否可行。

更多细节可以在官方 repo 的这个 issue中找到

我最近使用 react-router 将路由从 hashHistory 切换到 browserHistory。不过有一个问题。每次我访问嵌套路由并尝试刷新页面时，都找不到诸如我的徽标之类的公共资源，因为它使用嵌套路由的第一部分作为资源的根。

在我的 index.js 中，我需要如下图像：

我在导航栏组件中使用了一个徽标，如下所示：

这是我的路线：

这是我的 webpack 配置：

每次我转到“/”或“/chefs”时，一切都会正常加载，但是，当我访问诸如“/chef/register”之类的嵌套路由并刷新浏览器时，在导航栏组件中找不到徽标。

出现以下错误：

如您所见，该徽标正试图从包含我的路线“/chef”第一部分的位置获取。

我尝试在我的 webpack 中删除 publicPath 配置，但是这会影响嵌套组件在刷新时的呈现。

关于为什么会发生这种情况的任何想法？