问题标签 [webpack-file-loader]

我正在尝试通过 webpack 文件加载器输出所有图像文件，但是 webpack 忽略了带有 PNG 扩展名的图像。配置适用于 JPG 文件。

我的 webpack 配置：

源文件夹结构

我有一个简单的Hello World类型的 Web 应用程序。它只是显示文本“Hello, World!” 带有背景图像。该应用程序按预期工作，但我想更好地了解图像是如何捆绑和提供的。

当我运行时webpack-dev-server，我看到我的背景图像pattern.svg发出为e78b561561e0911af1eae4c8c3de25c4.svg：

如果我访问http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg，图像将按预期提供。但是，如果我在我的文件夹中查看 webpack 的输出dist，我只会看到两个文件：

当我请求时会发生什么http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg？图像在 webpack 的输出包中的位置，服务器如何知道映射http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg到该图像？参考以下相关文件的内容。

/app/index.html

/app/index.js

/app/styles/main.css

/webpack.config.js

嘿伙计们（使用 webpack 2.1.0-beta.22），所以我的配置中有以下配置webpack.base.js：

这在我的webpack.dev.js：

现在我的scss文件中有这一行：background-image: url('/themes/default/client/images/snow-flake.png');

如果我运行 webpack 并使用检查器，则路径将被替换为：url(/themes/default/dist/media/snow-flake.0af467e3.png)

哪个看起来完美的问题是file-loader没有创建/复制到该目录所以themes/default/dist/media不存在？

有人遇到过这个吗？

对于我的图像位置：/src/assets/bitmap/sample.jpg

给出了关键配置：

context: resolve('src')

...

我期待图像的输出结构如下所示：

/builds/web/assets/bitmap/sample.jpg

相反，我得到了这个：

/builds/web/src/assets/bitmap/sample.jpg

如何告诉文件加载器输出路径需要相对于/src而不是/？

最近几天我在学习使用 webpack，对 webpack 文件加载器感到困惑。据我所知，我们可以使用文件加载器来复制图像等文件，并自定义或编码文件的名称并获取返回的路径。但是我不知道为什么我们需要文件加载器，返回的路径是做什么用的？我认为文件加载器可以做的那些事情也可以很容易地手动完成，我错了吗？我是 webpack 的新手，我在网上搜索过，没有发现任何关于它的信息。任何帮助表示赞赏，在此先感谢！

I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error.

It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error.

I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine.

Is there another loader I can use? How do i correctly load these templates along with the images used by these templates?

here is my webpack.config

And below is the parse error that I get.

Error: Template parse errors: Can't bind to 'routerlink' since it isn't a known property of 'a'. ("r> Menu ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} "): t@0:359 Can't bind to 'routerlinkactive' since it isn't a known property of 'a'. (""item ui red" *ngfor="let r of routes"> ][routerlinkactive]="['active']">{{r.text}} Home Menu ]*ngfor="let r of routes"> Home Menu [ERROR ->] ]*ngif=bolWidthLess1000>

[ERROR ->] ][routerlink]=r.routerLink> ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} ][routerlinkactive]="['active']">{{r.text}} "): t@0:674 Can't bind to 'ngforOf' since it isn't a known property of 'a'. ("/div>

]*ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> "): t@0:540 Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("> [ERROR ->] {{r.text}} ]*ngif=!bolWidthLess1000> "): t@0:512 Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} [ERROR ->]

我正在尝试像这样在我的 React 代码中导入图像（我正在使用 babel）：

在浏览器中检查损坏的图像时看到的内容：

在我添加 css-modules 之前，它一直有效。这是我的 webpack 配置的样子：

我想在文件夹 /dist/ 中有 jQuery ui 资产，它们应该从应用程序加载。我的 webpack 配置中有这个：

它尝试从根目录加载资产，而不是从/dist位于 dist 目录中的图像文件加载。

我尝试将 dist 添加到名称：

图像正在加载，但我有目录 dist/dist 与图像文件。我尝试添加./但未加载图像。我也尝试设置outputPath=/dist/，但这并没有改变任何东西。

我正在使用 bootstrap sass 并提取 text-plugin 以将编译后的 css 输出到文件中。如果我不在我的 style.scss 中导入引导程序，它会完美工作，但是当我导入引导程序时，webpack 无法解析字体路径。它在我的 src 文件夹而不是 /node_modules/bootstrap-sass/ 中查找引导字体

找不到模块：错误：无法解析 /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass 中的“文件”或“目录”../fonts/bootstrap/glyphicons-halflings-regular.svg

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

包.json

webpack.config.js

为了测试的目的，我在 karma 中使用文件加载器失败了。我收到 404 错误，当尝试在 Chrome 中调试时，文件不会显示在 dev-tools 下的源选项卡中。

就是行不通。

我的 webpack.config.js：

我的 karma.conf.js：