问题标签 [webpack-file-loader]

有人可以帮助我吗？我使用文件加载器来处理 sass 中的图像，编译后的 css 文件是

前：

下面的 webpack.config

我寻找答案这么久，希望有人帮助我，谢谢！

我正在从 gulp 过渡到 webpack，我在一个static/img文件夹中有图像，我想处理这些图像image-webpack-loader，然后复制到一个build/public/img文件夹中。file-loader我想用这个吗？问题是图像没有被复制。事实上，这个加载器似乎在构建过程中被忽略了。

我是第一次使用 Webpack。目前，一切都得到了很好的服务。我的问题是当我试图建立一个dist文件夹时。目前我得到了我的index.html和bundle.js文件，但我不知道如何将我的资产推送到dist文件夹中。

我已经加载了文件加载器，但它实际上似乎并没有按照我的意愿去做，而且我运行的谷歌搜索都没有告诉我我需要知道什么。下面是我的配置文件。有人可以牵马下水吗？此外，一旦我让它运行，我是否需要将所有图像导入我的 React 组件？

嗨，我使用 Webpack、TypeScript 和文件加载器建立了一个项目。

我的webpack.config.js：

我的tsconfig.json：

我的index.ts：

上述星座使舞台达到index.html预期。

现在我在我的文件夹中添加了一个bs.png文件src/images/，现在我的项目结构如下所示：

据我了解，这bs.png将作为文件加载/dist/14145c56ece7799954586ba6f8464dbb.png。我的麻烦就从这里开始。我尝试按如下方式加载图像。首先，我创建了一个custom.d.ts包含用于加载.png文件的模块声明：

现在index.ts我通过import * as Image from './images/bs.png';. 结果Image是函数类型，console.log(Image) 的输出是14145c56ece7799954586ba6f8464dbb.png. 不幸的是，我无法像这样加载 Pixi 纹理：

有了这条线，我得到：

我明白。我也不能使用：

尽管 Image 似乎确实返回了文件路径。我尝试使用pngwebpack 创建的文件路径加载图像，但纹理仍然存在undefined。

我真的不确定这里的真正问题是什么。我需要运行服务器（例如快递）还是我只是错过了什么？顺便说一句，这是npm run build使用命令的输出awesome-typescript-loader：

我正在尝试将 React 应用程序部署到 Heroku。在我的应用程序中，我使用 Flag Spirtes ( https://www.flag-sprites.com/ )，因此我的目录中有一个文件夹和一个标志的图像。

我已经将 webpack 配置为使用文件加载器加载它，并且当我在本地以生产模式运行服务器时似乎工作正常。但是，当我尝试部署到 Heroku 时，出现以下错误：

下面是我的文件夹目录的图片：

还有我的 webpack.config.js：

添加图像非常新，所以可以用一些新手解释来做:)

我一直在尝试许多不同的配置，但我现在觉得我已经盯着这个问题太久了，无法再弄清楚了。我正在尝试将 webpackfile-loader用于简单的图像，而正常的配置在开发中就像一个魅力，每当我npm run start使用 SSR 运行时，我都会遇到标题中提到的错误。要在此处提供更多信息，请参考我的 webpack 配置中的规则：

这是我的依赖项：

只是为了完成，我的public文件夹的结构是这样public/js的public/images，并且 webpack 正确地输出了这个文件夹中的图像。我觉得我在某处犯了分心错误，所以如果您需要任何其他信息来帮助我解决这个问题，请告诉我。这是一个全新的设置，因此每个包都是最新版本。

编辑

我实际上注意到，除非我webpack -p先运行（它会创建public/images包含使用过的图像的文件夹），否则在开发模式下控制台告诉我它找不到任何图像，开发构建不会抛出任何错误，但是有一些问题路径，如果我不指定任何路径，我只能使其工作。在生产中，此配置“有效”，但Unexpected character出现错误。

我有一个使用 Typescript 2.4.1、Webpack 2.6.1 的项目，并且在获取正确加载图像的相对路径时遇到了一些问题。

如果我将图像放在与.ts加载它的文件相同的文件夹中，我可以让它工作：

所以这有效：

但我不知道如何让文件加载器找到具有这种结构的图像：

我尝试按照此处publicPath所述设置文件加载器选项，但无论我尝试了何种绝对路径和相对路径组合，我都无法以这种方式加载文件。

这是我的 webpack.config.js 文件。（我删除了一些部分，因为它很长。）

这是我的打字稿要求声明：

（我尝试让好的 ES6 导入工作，但效果并不好。）

我开发了一个包含一些图像的库。

我正在使用file-loader为了将它们在我的生产中导出到一个res文件夹中。所以我的分发文件夹如下

问题是当客户使用我的库时，他必须将此res文件夹放在他的主 url 中。

我的问题是如何webpack/file-loader搜索res相对于my.core.js. 所以我的客户只需将我的库 dist 文件夹放在他们想要的服务器中的任何位置。无需将res文件夹移动到其他地方。

url-loader正在解决我的问题，但我不想将我的图像嵌入到我的js文件中

我已将 webpack 配置为加载 jpg 文件，但我的应用程序没有加载图像并且找不到它们。这是 webpack 配置：

这是我的主要应用程序文件，它包含两条通往天气和关于页面的路线以及两个用于导航的导航链接：

这是我想加载图像但它不显示的地方，图像的实际地址在浏览器中似乎是正确的，我不知道 webpack 配置文件中的问题是什么 webpack 正确发出文件但浏览器不会' t 显示图像：

我已经创建了一个我在我的 github 帐户上遇到的问题的演示。

我有一个带有两个入口点的 webpack 配置——“功能一”和“功能二”。“feature-one”包含一个 CSS 文件，该文件本身包含一个徽标：logo.svg.

当 webpack 运行此代码时，该logo.svg文件将包含在该dist/文件夹中。

在 webpack 的“发射”阶段，可以检查每个入口点的块。

一个Chunk类有一个files属性，它应该列出块中涉及的所有文件。检查时，我们可以看到feature-one.js并被feature-one.css引用，但logo.svg不是。

相反，一个Module类有一个fileDependencies属性，它列出了所有涉及的文件路径，这个列表 确实包括文件的（完全限定的路径）logo.svg。块中涉及的模块可以通过Chunk'modules属性访问。

这是示例的 webpack 输出：

我的期望是files块＃1（即功能一）的数组将包括logo.svg，但它没有。

我不确定发现特征的依赖关系图包含logo.svg文件的最合理或受支持的方法是什么，但最终这是我的目标——获取给定入口点的所有直接 + 传递资产依赖项的列表或块。