我有一个header.html文件

我也有一个index.html文件，我想在其中包含这个 header.html。

我的 index.html 看起来像这样：

我正在使用这个webpack.config.js：

我试图像这样包含 header.html：

这也是：

尝试使用以下行导入 js/index.js 文件：

...结合这个：

还有这个：

但没有任何工作。我只是将我的${require ...}代码作为 index.html 中的纯文本返回，不包含任何内容。

知道如何包含 header.html 文件吗？

这是我刚刚创建的用于解决此问题的存储库：https ://github.com/DevCubeHD/WebpackStaticPage

首先：文件结构。你应该知道两个重要的文件夹来理解我的例子，以防它甚至不是惯例。该/src文件夹是所有原始内容所在的位置，该文/dist​​件夹是默认打包网站所在的位置。从那里它可以部署在任何服务器上。我不确定开发是否需要这个目录，但我希望你是。

我正在尝试为生产和开发设置两个 webpack 脚本。生产工作正常：脚本运行低谷，页面放入/dist.

在开发中，我想使用 webkit hotloader 来在我做一些更改时立即将更改应用到页面。它确实运行并且输出看起来非常好，但是当涉及到页面时它卡住[WDS] App hot update...并且不更新内容。即使刷新页面后，内容仍然是旧的。唯一有帮助的是运行生产脚本。

要运行开发脚本，请使用yarn start或npm run start。对于新/dist目录，您可以使用生产脚本yarn build或npm run build现在。

请帮助我修复 webback-dev-server，以便我可以有效地开发。：） 非常感谢！

我有以下 src 文件夹结构：

我正在尝试将 webpack 配置为使用 app 文件夹中的模板发出多个 html 文件。最终的构建文件夹结构应如下所示：

问题是在构建之后，index.html并且nested.html具有相同的图像路径，<img src="img/webpack.png">这是不正确的nested.html

nested.html应该有以下路径 - <img src="../img/webpack.png">。

如何让 webpack 为嵌套的 html 文件设置正确的资产路径？

重现步骤。

1. 下载回购
2. 安装包npm install
3. 跑npm run build

我的 webpack.config.js

我的 package.json

根据这个线程，html-loader 没有问题 - https://github.com/webpack-contrib/file-loader/issues/272

Webpack 文档提到组件之间的资产共享，但没有提供示例 - https://webpack.js.org/guides/asset-management/#global-assets

html-loader 选项可能对此有解决方案，但文档对我来说没有多大意义，我无法弄清楚 - https://webpack.js.org/guides/asset-management/#global-assets

我正在关注动态生成 htmlWebpackPlugin 的文章 - https://extri.co/2017/07/11/generating-multiple-html-pages-with-htmlwebpackplugin/

我正在尝试在淘汰赛中创建新组件：

和categories.html内的我的 HTML 块：

在effect.js内部：

加上webpack.config.js：

但它根本不起作用。这是浏览器的输出（控制台中没有错误）：

你有这方面的经验吗？你知道如何正确处理吗？

我想将 webpack 与带有选项“localIdentName”的 css-loader 一起使用，当然还要使用类名的哈希

但我没有使用 React 或类似的 DOM 库

我的 webpack 规则

还有一些来自 index.html 的代码

还有一些scss规则

并且使用 webpack 配置我有类名city-name__SOME-HASH，但里面index.html会保留city-name

怎样成为 ？也可以更新类名index.html吗？

在我导出为的模板中index.html，我有这一行：

我的目标是使用散列名称导出它：

相反，它以原始名称导出。

我的intex.html模板加载为：

这是我的文件加载器：

早些时候我一直在使用 gulp-nunjucks 进行模板 - content 扩展布局并包含 partials。所以我试着用html-webpack-plugin

webpack.config.js

在_layout.html我成功地要求部分页面使用所需的 html 文件呈现。

但是，如果我试图在_layout.html -处要求部分内部已经需要的部分，则相同的方法不起作用require('html-loader!./pages/' + htmlWebpackPlugin.options.page + '.html')。

/pages/home.html

有没有办法html-wepback-plugin在另一个部分中要求部分？我应该应用某种加载器来启用它吗？

我HtmlWebpackPlugin在 webpack 中使用，下面是它的配置：

在我的html我将script标签定义为：

webpack 将替换<%= htmlWebpackPlugin.options.sdk %>为/mylib.js. html-loader但是，一旦我添加如下插件，它就不起作用了：

我使用的原因html-loader是解析img srchtml 文件上的标签。但它与HtmlWebpackPlugin <%= ... %>表达冲突。我怎样才能让它们都工作？

使用 Webpack 生成静态 HTML

我已经使用 Webpack 作为捆绑器和html-loader设置了一个静态网站生成器，以生成依赖关系树并处理找到的依赖关系（CSS、图像、JS 等）。

为此，我管理了 html-loader 的选项来处理带有src或href属性的元素。

如何重现

完整的代码可以在这里找到。

我得到了什么

HTML 被正确处理，链接/URL 被正确替换，期望 javascript 资产。既不输出块，也不src替换脚本的属性。

我是否错过了配置中的某些内容？

我是否遇到了 html-loader 或 Webpack 错误？

I spent hours on a basic webpack configuration but I'm still not able to make it work. My aim is to perform the parsing of a html template as you import it in a JavaScript file. It looks like a common use-case, but there should be something odd in my webpack configuration or in my understanding.

I looked for configurations of html-loader, html-webpack-plugin, posthtml as well as pug and I've read all of their documentations, but none of them worked.

According to PostHTML Readme:

PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.

So, since it was the most promising, I report my attempt with posthtml:

It doesn't return any error but it looks like is totally ignoring the posthtml-loader, since executing import template from 'src/test.html' I get the template as string (how is supposed to do html-loader alone).

In my understanding, loaders are supposed to compile/transform files with different formats and make them available to JavaScript, and since html is the most common type in a front-end project I supposed it was easy, but I'm not finding anything on the internet related to this question.

What I expect is to have a DOM tree object or, anyway, something that can be used by JavaScript.

Is anyone able to help me?

EDIT: My question is about getting a webpack configuration up and working. I know many solution for parsing HTML strings, but they're not applicable here