问题标签 [webpack-file-loader]

我正在开发一个角度应用程序，该应用程序需要html将文件提取为纯 HTML 文件，同时应检查是否<img src="...">需要这些图像（作为资产）。另外，图片是基于根路径（so /images/something.png）的，需要相对于 webpackcontext设置（基本路径）进行解析。

我怎样才能做到这一点？无法让 html-loader 与文件加载器很好地配合使用。因为前者输出一个 JS 文件（带有require语句），而后者需要一个纯 HTML 文件。

我有以下 webpack 脚本：

我的文件被捆绑并输出到构建目录，一切正常。但是，我现在添加了一个字体加载器。在我的应用程序目录中，我在以下文件夹中有字体文件：（app/assets/fonts目前只有 TTF，但这会改变）。

我上面的字体脚本什么都不做，我运行了两个默认脚本：

并且没有任何东西放在公共目录中。这是我必须单独设置的东西吗？如何告诉加载程序在公共文件夹中使用我的字体文件创建一个相同的目录（与 app/ 内的目录相同）？

我正在尝试让我的 webpack 将我的文件从 转译到一个public/images目录中，app/assets/images但由于某种原因它无法正常工作。我为我的字体文件使用了相同的脚本，一切正常：

在职的

但是由于某种原因，在测试中将文件更改为图像文件的那一刻，什么也没有发生。

不工作

我错过了图像的东西吗？

我正在使用 webpack 为将托管一些反应组件的 npm 包生成适当的文件。他们附加了一些 CSS，其中引用了一些字体和图标。

使用加载器时，这些资产在主应用程序中file使用它们的绝对路径（即 ）被错误引用，而这些路径是缺失的。fonts/my-font.woff

有没有办法解决这个问题并让我的主应用程序查找正确的文件？我宁愿修复包本身，也不愿像有人提到的那样复制资产，因为我可能无法完全控制主应用程序。

Windows 10。我正在关注https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement上的 React + Webpack 教程，并停留在我们应该复制索引的地方.html 从 app/ 文件夹到 dist/ 文件夹。而不是复制到 /dist 文件夹的权利 index.html 被复制到 dist/app/ 文件夹。能否请你帮忙？

这是我的 webpack.config.js 文件

文件夹结构

提前致谢！

我目前正在使用 Webpack 来打包我们的 Angular2 应用程序，但我遇到了一个问题。

我已经阅读了几个文档，但我无法使用文件加载器在我的输出目录中复制一些文件。

这是我当前的文件层次结构：

和（完整的） webpack.common.js ：

要执行 webpack，我播放命令：

ts 文件被正确地转换为 javascript 并复制到输出目录中，index.html 文件也存在，但没有我的图像文件。

我认为我的配置文件有问题，但我看不到是什么。我已经花了好几个小时敲打我的头，所以任何帮助都将不胜感激。

谢谢

我有一个典型的 Webpack 文件，其中包含用于字体、图像、css 的加载器模块，如下所示：

工作代码：

不工作：

我的根文件夹包含以下目录：

图像和样式加载器都工作得很好，但由于某种原因，没有一个字体文件被编译到 public/fonts 目录中。

就像我的image和style文件夹一样，字体目录位于应用程序根目录中。在里面./fonts我有两个文件夹，里面有他们的字体内容./fonts/roboto，./fontawesome。这些目录需要反映在里面./public/，但现在我什至无法将字体复制到./public目录中，所以你最终会得到./public/fonts/roboto. 什么都没发生。没有任何警告/错误。我怎么知道我做错了什么？

新的网页包

没有任何内容呈现或复制到 public/ 目录中。没有错误。

我正在开发一个项目，该项目使用 Webpack 将一组预加载的库存图像与 webapp 捆绑在一起。大约有 400 张图像，其中一半是缩略图。我没有编写 400 条require语句，而是创建了一个新的上下文并迭代地加载它们。

webpack.config.js

main.js

所有库存图像都位于/images/stock目录中，并提供给/img. 问题是，当 webpack 完成捆绑静态资产时，它只提供了目录中刚刚超过一半的图像（console.log循环内仅打印大约 230 个文件名）。在浏览器中访问图像时，捆绑包中未列出的是 404。日志中没有抛出任何错误，因此似乎需要在正确的位置找到所有图像。

有谁知道为什么有些图像加载得很好，而有些则不然？都是jpgs，最大的问题大约是 5MB，大多数大约是 1MB（捆绑包总共大约 300MB），它们的创建方式没有什么不同（都来自同一个设计师）

我不确定这是 PostCSS 问题还是 Webpack 问题。

这是我的 webpack 配置中的相关图像处理程序：

这是我庞大的 postcss 模块链：

这是我的输入和输出

这是我在 css 中的调用参考

我无法找出正确的设置组合来引用我的css（footer-mountains.png）中的图像并通过webpack dev选项（又名来自ram）加载它 - 我看到了正确的hashfilename变形但不知何故我缺少加载路径或其他东西。我对这个话题很困惑。欣赏任何见解。

如果有帮助，这是我正在使用的完整包： https ://github.com/koistya/react-static-boilerplate

我正在为我的 React 应用程序使用 Webpack。

我在我的 webpack 配置中安装了 'File-loader' 和 'Url-loader'。

但是，我不确定如何将图像链接到我的组件。我将图像的“src”保存在“Data.js”文件中，从该文件中将图像的数据传递给反应组件。

我的 webpack.config.js：

我的反应演示组件，我只是require用来检索图像：

Data.js 文件具有每个图像的绝对路径（主应用程序文件夹）（我可能在这里出错）：

全局目录图像的价值：

我想知道我在哪里犯了错误以及如何解决这个问题？

编辑： 阅读后，我认为 webpack 需要参考图像的相对位置，所以我将 webpack.config.js 修改为以下内容：

然而，这并不能解决问题。指导将不胜感激。