问题标签 [webpack-html-loader]

我正在尝试使用 TypeScript 构建一个多页应用程序，并且正在摸索 webpack 以将 TypeScript 和 SCSS 转译，链接到 HTML 并将所有内容移至我的输出文件夹。

它很好地编译并将文件加载到我的 HTML 中。但是好像没有把编译好的TS打包成JS文件。

Refused to execute script from 'http://localhost:8000/c108951b472f9e4eb8bc.ts' because its MIME type ('video/mp2t') is not executable.

也许我对 webpack 的整个想法都搞错了，甚至可能是这样。经过广泛的搜索，我无法找到另一个工具来获得我想要的设计。

我webpack.config.json的如下：

我认为代码不重要。但是，如果您需要它，我会及时更新我的​​问题。

我有一个基本的 Vue 3 项目，在我的public/index.html文件中我想包含来自根目录（例如node_modules或我的semantic文件夹）的文件

我已经在vue.config.js文件中尝试了各种配置，但似乎它们都不起作用。

将自定义本地 css/js 文件包含到index.hmtl而不将它们直接移动到public目录中的正确方法是什么？

我一定遗漏了一些东西，因为似乎几乎没有关于在 webpack 中解析锚标签的文档。例如，如果我想散列链接到我的登录索引页面中的 html 文件的名称。

就像这篇文章说的： Webpack html-loader error processing href in anchor tags。即使我尝试在 html-loader 中扩展支持的标签，它也会导致错误。以下是有关扩展支持标签的文档：https ://webpack.js.org/loaders/html-loader/#list 。

那么anchor>href标签有什么特别之处呢？

我目前正在编写一个需要将一些 html 代码注入到消费网站的 js 库。我不想在我的 js 代码中使用字符串模板，所以我在 src 目录中创建了不同的 html 文件并使用 html-loader 插件加载它们，这样我就可以在我的代码中直接将它们用作字符串模板。我需要将此库捆绑为单个 js，可以通过单个 cdn 链接使用。但是当我构建项目时，我看到 html 文件仍然是从捆绑文件中的 src 目录导入的。有没有办法使用 webpack 将这些 html 文件作为字符串包含在我的最终 js 文件中？

谢谢

我正在学习 webpack js；下面的示例中，培训师将 html 页面从 src 文件夹加载到目标 ( dist) 文件夹。我正在尝试同样的事情，但在Webpack5. 我创建了一个config文件夹并从配置文件夹运行以下 webpack.dev.js。

Webpack.dv.js

根据yarn serve --config=config/webpack.dev.js命令，我收到以下错误，

./src/index.html 39 字节 [内置] [代码生成] [1 错误]

所以我玩弄Script了 HTML 文件中的标签（如下所示），

事实证明，如果我删除<script>标签，项目构建良好，但没有任何内容复制到 dist 文件夹。有人可以指出上述配置有什么问题吗？我错过了什么或我能做些什么来完成这项工作？还请指出为什么从 src 加载 index.html 是个好主意还是坏主意？

包.json：

谢谢！

我正在使用入门 webpack 页面中的设置：

如果我包含import './style.css';在src/index.js. 在生成的内部，dest/index.html我得到提取的 CSS 样式生成为<link href="main.css" rel="stylesheet">.

现在我想要的是删除import './style.css';顶部的那一行src/index.js并使用而不是<link rel="stylesheet" type="text/css" href="style.css">我将放置在模板中的那一行src/index.html。

执行此操作时， generateddest/index.html会正确获取该行<link rel="stylesheet" type="text/css" href="b88d04fba731603756b1.css">并dest/b88d04fba731603756b1.css生成文件，但它的内容是错误的，因为我得到的是这个而不是真正的 css 样式：

有没有办法将html-loader插件与 一起使用MiniCssExtractPlugin，这样我就不需要在 js 文件中导入 css 而是在 html 模板中导入它？

我在配置 webpack 时遇到了以下问题。我该如何解决它们？我想使用我自己的index.html文件。

我的配置文件如下，错误信息在底部：

webpack.config.js：

错误堆栈：Html Webpack 插件：

这是我的配置文件，我尝试使用 html-loader 它对 .html 文件工作正常，但我现在正在尝试学习和使用 handlebarsjs，但它的工作方式不一样。我也尝试过使用 html-loader 的预处理器选项，我创建了一个函数来读取 .hbs 文件，但我不断收到错误消息。

我正在尝试在 Angular 12 + webpack 5 中运行一个 hello world 应用程序。当我尝试添加时html-loader（正如所有指南所说的那样），我收到以下错误。

为什么会这样？我该如何解决？

如果您想复制这种情况，请在此处查看 GitHub 存储库，然后运行命令npm run start。

网络包配置：

我是一名初级前端开发人员，我想将其webpack用于我的一个 html 项目，我已经阅读了 webpack 官方文档并进行了配置webpack.common.js, webpack.dev.js, webpack.prod.js

现在，当我<img src="./images/image.jpg" alt="image" />在我的 html 文件中使用并启动webpack-dev-server图像时，图像加载完美，但问题是当我在其他文件（如等）中进行更改时，图像源在 **browser 开发人员工具的网络中index.js, style.scss不起作用webpack-dev-server选项卡 img 类型显示 text/html 但是当我运行生产构建时，图像源工作正常。

我试过file-loader了，但问题webpack-dev-server不是使用通过file-loader它生成的图像，而是使用通过 webpack 的内置加载器生成的图像，而我无法打开的图像是Invalid Image。

所以问题出在 webpack 的内置Asset Module或Loader其他任何东西之间，webpack-dev-server我该如何解决这个问题？

版本

文件夹结构

webpack.common.js

webpack.dev.js

webpack.prod.js