问题标签 [webpack-file-loader]

抱歉打扰，因为这可能是本地问题。但是这几天一直困扰着我。

这是我的 webpack 配置：

和我的 main.js：

一切都很好，但是当我查看 Chrome 的控制台时，它告诉我：

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

I am using Angular with Webpack (with loaders like file-loader, url-loader etc.)

Now, I want to load image which is being served through http.

The build was successful, when I used require('./imgs/profile.png')

But when I used tried say E.g. require('http://myserver.com/images/profile.png') the build failed.

Now, the problem is my images are not there in local environment instead they are there on some 3rd party server say e.g. AWS S3.

How to achieve this? Below is my webpack.config.js

我正在尝试使用 webpack 转换（和捆绑）我为电子的主要（而不是渲染器）编写的 ES6 代码。当我编译并运行时，应用程序工作正常。但是在与图标图像（我用于托盘）捆绑后electron-packager无法加载。

这是我尝试运行由以下内容构建的 exe（我在 Windows 10 上）时遇到的错误electron-packager：

下面是电子主进程的 ES6 代码：

这是我的 webpack 配置：

我在使用 webpack 文件加载器让我的 mp3 文件工作时遇到问题。

这是问题：

我的硬盘上有一个 mp3 文件，如果我使用 chrome 打开例如“c:\somefolder\somemp3file.mp3”，它会在浏览器的选项卡中打开并播放得很好。

但是，当我使用 webpack 提供完全相同的文件时，它不起作用。我在 webpack 中配置了加载器，如下所示：

然后，当我尝试链接到我的 javascript 中需要它的文件时，如下所示：

这正确地返回了 mp3 文件的 url。

如果我尝试手动转到localhost:8080后跟 require 返回的 url，Chrome 中的 mp3 播放器会像我预期的那样弹出，但是无法播放文件，并且无法像文件损坏一样单击播放按钮或者其他的东西。

任何人都知道我在这里做错了什么？

我有一个带有两个 webpack 配置的通用 javascript 应用程序 - 一个用于服务器，一个用于客户端。在这两个配置中，我都使用文件加载器来要求静态文件（字体、图像等）并获取这些资产的 url。

在这两种配置中，我都使用publicPath /static/. 在客户端构建中，资产 url 的前缀是正确的，但在服务器端构建中它们不是。

这是服务器端配置：

谁能看到为什么output.publicPath在 require 调用中没有使用配置选项？

我在使用 webpack 时遇到了麻烦。我的配置在这里 – https://gist.github.com/lavezzi1/801d5d3f2d2f5dfebb8efd234cedb9ab

如果我写类似 <img src="./static/logo.png" alt="logo" class="logo">

在我的 html 文件中，我的图像不可用，我的意思是我在开发模式下看不到它。

我将此命令用于 serve "dev": "webpack-dev-server --inline --hot"。但是，如果我在 vue 文件中编写相同的代码，它会正确服务器。当我为产品构建它时也可以完美地工作。

怎么了？如何在开发模式下提供图像？谢谢。

我正在用 webpack 打包一个 Angular2 项目。我的 app.component.ts 是：

它的cssapp.component.css是：

我webpack.common.js的是：

然后我得到一个错误：

我vender.ts的就像下面的例子：

我已经为 css 尝试了“原始”，但文件加载器并不喜欢它，也没有放入icon_background.png资产中。而其他尝试如'style!css', 'css', 'css/locals',loaders: [ 'style-loader', 'css-loader?sourceMap']也因获得TypeError上述结果而失败。

在 Angular2 应用程序中，我在 webpack 配置中有一个文件加载器设置，如下所示：

我在配置的其他地方也有这个：

据我了解，文件加载器在 node_modules 文件夹中搜索与给定表达式匹配的任何文件（在本例中为字体文件），并将它们复制到/assets/fonts构建输出中的文件夹中。但是，这确实有效，因为实际上没有文件被复制到目标文件夹。我错过了什么？

附带说明一下，我还想知道如何处理冲突，因为node_modules多个包中可能有同名的文件。

更多信息： vendor.scss文件包括以下内容： $zmdi-font-path: "assets/fonts"; @import "~material-design-iconic-font/scss/material-design-iconic-font.scss";

sass-loader 最终应用它来生成以下 css：

上述两个步骤将导致浏览器向位于assets/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0. 显然，直到运行时才会发生这种情况。我require将文件放在哪里以便在构建时将其复制到资产/字体？

我也在sass-loader管道中使用：{ test: /.scss$/, loaders: ['raw-loader', 'sass-loader'] }

并将 sass 包含在我的组件中，如下所示：

从浏览器看，我可以看到 CSS 包含在 HTML 中，但对字体的调用返回 404。

我在 src 文件夹中有一些图像：

在 index.html 文件中，我将指出

在一些 html 文件中，我将指出

我正在尝试通过 webpack 加载图像、字体。下面是我的 webpack.config

尝试将图像/字体加载到 webpack 输出文件夹。它没有抛出任何错误。它成功构建但在构建中，这是我的 webpack 输出文件夹字体加载正常但图像未加载

当我开始时webpack，它会编译我的scss文件并将小文件转换为base64. 但是，它还会将我/img文件夹中的大图像复制到输出文件夹中。我怎样才能防止webpack这样做？我希望webpack在图像文件夹中留下对原始图像的引用，而不是将它们复制到输出文件夹中。

webpack创建如下所示的文件（在输出文件夹中）：

这是我的 webpack 配置文件：