问题标签 [html-webpack-plugin]

我相信我到处都看过，但我空手而归。我一直在使用从我的源html-webpack-plugin加载单个index.html文件，但是我的客户端带有一些本地化，我认为如果我可以动态添加它们会很棒。

所以我试图切换到使用模板引擎html-webpack-plugin，即ejs，但我遇到了重大问题！

我想html-webpack-plugin渲染和.ejs归档，我需要给所述.ejs文件一个巨大的本地化对象。

我想要这样的东西：

来自这样的本地化.json文件：

我尝试使用两种不同的 ejs webpack 加载器，但我根本不知道如何将一个简单的对象传递给 ejs 加载器，我可以在我的 ejs 文件中使用它。

希望你们有一些答案 :D 在此先感谢。

我有一个使用 Twig 进行模板的项目。其中的所有数据都是静态的，但为了清楚起见，我已经在其他树枝文件中分离出部分页面（否则一个文件中会有数百行标记）。

我使用 webpack 作为构建工具，以及 HTML Webpack 插件。

例如，假设我有以下内容：

意见/index.html

意见/欢迎/hello.html

现在我想做的是使用 webpack 捆绑任何 js、css 并使用 HTML Webpack Plugin 创建一个 HTML 页面并将这些样式和脚本注入：

在我的dist/index.html中，我期望得到这样的东西，其中生成的 html 页面显示为 HTML：

dist/index.html

但是，我得到的是这样的东西，它仍然显示我的“包含”模板：

dist/index.html

如果无法编译模板，是否可以使用 Html Webpack Plugin 复制所有模板（所有模板文件的整个目录到/dist以便它们维护它们的路径）？

谢谢！

如何指定在模板文件中插入 bundle.js 的位置。我需要更多地控制我的 bundle.js 文件的确切插入位置。

Html-webpack-plugin 允许指定 - 注入：'head'|'body'

我正在更新一个应用程序以使用 webpack 1 中的 webpack 2，并且常规构建工作正常。使用 devServer 并且只需要生成的块之一时似乎会出现问题（它是一个电子应用程序，所以我有主块和渲染器块 - 两者都包含在常规构建中，而开发服务器仅包含渲染器块）

一切都在 webpack 1 上运行，但由于某种原因，运行时没有包含在我的块中？我试过重新排序，但无济于事。

似乎其中一个块没有正确包含：

为什么是这样？

我正在尝试分别生成两个 css 文件（浅色和深色主题），以便我可以为我的应用程序构建一个主题切换器，以根据用户偏好加载任一样式。似乎无法让它在没有错误的情况下正常工作。

实际上，文件是按预期创建的，但我只想将其中一个注入到我的文档头中，只要我允许两者都被注入，一切正常。

我试图使用 chunks 或 excludeChunks 选项来影响哪些文件被注入到头部，但是当我使用这些选项时我不断收到错误。

webpackJsonp 未定义错误

我对 WebPack 相当陌生，我希望能够获取一个 CSS 文件目录 (.app/styles/[css files...]) 并将它们输出到一个 CSS 文件 (dist/styles.css) 中。

目前，所有的 JavaScript 文件都被编译成一个单独的“index_bundle.js”文件，这是完美的，但我想为我的 CSS 文件实现同样的效果。

经过大量“谷歌搜索”后，我发现 WebPack 的 ExtractTextPlugin 应该能够帮助解决这个问题，但这仅适用于添加到“条目”属性的一个 CSS 文件（例如：条目：{style：“. /app/styles/style.css"}) 然后将其作为链接标记添加到 html 的头部，这很好，但我希望我的所有 css 文件进入一个 styles.css 文件，然后在 html 中使用它头作为链接。

我当前的 WebPack 配置如下所示：

有人可以指出我正确的方向吗？即使它是另一个插件或不同的方法。任何帮助将不胜感激！

编辑：我的新 WebPack 配置如下所示：

我正在尝试将我的 Aurelia 应用程序从 System.js + JSPM 移植到 Webpack。该应用程序有多个条目 html: index.html, index2.html.

由于我是 Webpack 的新手，我从使用 easy-webpack 的 aurelia 骨架开始，并尝试逐渐添加我的应用程序特定代码。

对于单一条目的最基本情况，index.html骨架工作得很好。我还添加了我的本地模块，node_modules并在app.

但是，我无法为多条目 html 正确设置配置。这就是我的webpack.config.js（显示修改的部分）的样子：

问题如下：

1. index2-script如果我从默认值中排除config-generate-index-html，则添加脚本的顺序index.html变为app.bundle.js, aurelia-bootstrap.bundle.js, ...，而不是aurelia-bootstrap.bundle.js, app.bundle.js, ...，这会导致Uncaught ReferenceError: webpackJsonp is not defined....
2. 根据我的理解，错误是由于easy-webpack/config-common-chunks-simple（wrapper around webpack.optimize.CommonsChunkPlugin）将初始代码和通用代码打包到aurelia-bootstrap.bundle.js（“bootstrap”块）中而引起的。因此，我也尝试过require('@easy-webpack/config-common-chunks-simple')({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' })，但得到了
   • Uncaught TypeError: Reflect.getOwnMetadata is not a function从aurelia-metadata.js, 和
   • Uncaught TypeError: Cannot read property 'call' of undefinedfrom webpack:///webpack/bootstrap <hash>，这似乎是因为找不到模块而引发的。

我对接下来应该尝试什么感到完全困惑。请建议。

我正在尝试将标题传递给 html-webpack-plugin 但它根本不创建标题标签:(

有人可以告诉我问题出在哪里

webpack.js

这是index.html

当我启动 webpack 服务器标题时没有注入？

我已经配置了babel-css-in-js 插件，以便./app/bundle.css在 webpack 运行babel-loader. 我需要将此文件注入到由html-webpack-plugin. 我试过通过css-loader类似的方式加载它：

但我得到了错误：

这是我的.babelrc：

html-webpack-plugin 使用html-webpack-template它的配置，如下所示：

我可以使用其他任何机制将其注入css file生成的模板的头部吗？

项目源码在github上

我有一个运行 express js 和 angular 2 的应用程序我正在使用 webpack 来捆绑我的模块和 webpack dev 中间件来运行 webpack 与 express。

我已经设置 express js 有一个通配符路由来提供 index.html 文件但是，当我尝试点击 localhost:8080/login 时，webpack-html-plugin 根本没有添加 js 和 css 资产。

如果我点击 localhost:8080 （主页）资产被正确添加我只能猜测这是由公共路径处理的，因为当我将公共路径更改为 /login/ 登录路由有效但主页没有？

有没有办法让它为其他路线提供资产？

非常类似于Webpack + Angular2 错误的 publicPath？

我的回购是公开的，所以如果你不介意看一下，那就太好了！