问题标签 [webpack-file-loader]

我正在使用 Jenkins 构建一个反应应用程序，并且构建成功。但是，某些组件无法加载，并且出现错误：

本地，一切正常。

应用程序结构（服务器）：

图标组件：

Webpack.config.js：

过去使用 Rails，我记得使用的资产是预编译的，生成哈希，客户端知道如何插值。react + webpack的情况是什么？

我有一个 webpack 2 配置，它存在以下问题：1）它不会将图像复制到 dist 文件夹 2）它复制字体但将“css”添加到字体文件的名称中。

这是控制台错误：

我不确定'css'部分来自哪里，它应该是'dist/fonts/NotoSans-Regular.ttf'

这是我的 webpack.config.js：

我正在尝试使用文件加载器来处理图像并将它们包含到我的构建文件夹中。

html 文件中的图像出现在构建中，但样式中的图像不出现。

我将我的 webpack 配置拆分为 2 个文件，并使用 webpack 合并模块来合并它们。

这就是我配置css处理的方式：

这是文件加载器配置：

一块scss：

这是 包含完整配置的项目本身

假设我有一个简单的加载器，它应该只是将文件从源移动到部署，我只是为了简单化状态而单独复制了规则。

我已经用这个尝试了一百万种不同的组合，基本上一旦文件加载器处理它，它就会将它复制到output.pathwebpack 配置中，路径是这样的：

/outputpath/thenfilefromloader/to/folder/goes/here/nameoffile.cshtml

我正在尝试做的或多或少，将字符串拆分后goes并与输出路径连接：

/outputpath/goes/here/nameoffile.cshtml

这甚至可以实现吗？基本上我试图摆脱 gulp，这些文件只是用 gulp 复制的，就是这样，但是在复制之前对路径进行了操作。

当我尝试通过 JS 导入一些资产（不是样式，它们可以正常工作）图像或字体时

我收到奇怪的JSON.stringified字符串

module.exports = __webpack_public_path__ + "img/logo.png";

当我将 publicPath 设置为/我收到这个：

module.exports = "img/logo.png";

这是我的 Webpack 配置。我究竟做错了什么？

const isDevelopment = process.env.NODE_ENV !== 'production';

我在反应应用程序中使用 webpack2（我对它很陌生）。当我通过 img 标签在应用程序中加载图像时，一切正常。但是当使用图像作为css中的背景url时，我无法让它工作。

这是我的 webpack：

我正在使用 express js 作为服务器，但我认为这与问题无关。

然后在我的css文件中

background: url('/assets/logo.svg');

如果我更改路径，我会收到错误，但如果我使用绝对路径没有错误，网络选项卡会返回 304，但如果我转到 localhost/assets/logo.svg，它只会重新加载页面并且不会加载徽标。我搜索了许多 SO 问题，但我无法弄清楚我的代码有什么问题。

我对 webpack/npm 很陌生，我正试图弄清楚如何在其他项目依赖项中使用 css url。

文件夹结构

webpack.config.js

我已经成功地将 lightGallery 包含在我的项目中，如下所示：

应用程序.js

应用程序.scss

灯光画廊样式表引用了我fonts/使用 webpack成功加载的字体file-loader

我的问题是构建的 css 文件试图从 scss 文件夹而不是我的根目录中引用相对于字体。

IE：http://localhost:9000/scss/img/loading.gif

我需要从 css 链接到的所有资产才能从我的根目录中解析

IEhttp://localhost:9000/img/loading.gif

无论如何我可以将我的 css-loader 配置为在所有 url 前面加上 a/吗？

帮助！

我有一个.scss使用背景图像 ( background-image: url('../../../image.png')) 的文件。当file-loader我构建我的应用程序时，webpack 插件会检测到该图像并复制它，这很棒。

问题是我有相当多的图像和相当多.scss的文件，而且我的代码中的所有相关导入都非常混乱。

有没有办法可以告诉我，file-loader或者sass-loader如果我background-image: url('@alias/image.png')知道我指的是文件夹在哪里image.png？

我正在尝试使用 webpack 和 webpack-dev-server 在 React 组件中显示图像作为项目的一部分。

到目前为止，我已经完成了以下步骤：

• 使用 npm 安装文件加载器
• 更新 webpack.config.js 以添加图像文件的加载器
• 将我想要的图像导入到我的组件中
• 在我的 img 标签中使用了导入

采取这些步骤后，webpack 无法编译并出现“找不到模块”错误：

我的文件夹结构如下：

我添加到 webpack.config.js 的新加载器是：

我已经在 App.tsx 中导入了图像文件，如下所示：

...并在这样的 img 标签中使用导入：

注意：提供了 webpack.config.js 和 App.tsx 的全文，直到我更接近答案并意识到它们不相关（请参阅更新 1）。

我假设我在导入中的相对路径方面犯了一些非常微不足道的错误。正如你可以想象的那样，我尝试了各种替代方案。

谁能提供一些见解？

作为参考，因为我不断地点击与错误版本的 webpack 相关的文章和问题，以下是我的版本：

• 反应 15.5.4
• Webpack 2.6.1
• Webpack 开发服务器 2.4.5
• 打字稿 2.3.2

---

更新 1： 2017.06.05
因此，查看这个 SO 问题和Medium 上的这篇文章，我已经能够确定问题不在于我如何使用 webpack，而在于我使用的是 TypeScript。该错误是由于打字稿编译器不知道 .jpg 文件是什么而导致的打字稿错误。

显然，我需要提供一个 d.ts 文件或使用 require 语句。

差不多好了...

当我将字符串传递给计算属性中的文件加载器 require 方法时，它可以正常工作，就像这样

但是如果我尝试将一些变量传递给它，它会抛出错误

错误：Error: Cannot find module "."

我该如何解决？我想根据某些条件创建相对路径，然后想将它传递给 require 方法以获取绝对路径。