问题标签 [html-webpack-plugin]

今天我正在尝试使用 Angular2（模板https://akveo.github.io）。根据安装指南，我运行了以下命令。

我已经安装了Node.js v6.9.1。

1. npm install——工作得很好。

2. npm server--失败并出现以下错误。

   E:\........\node_modules\script-ext-html-webpack-plugin\index.js:3 const INLINE = 'inline'; ^^^^^ SyntaxError: Use of const in strict mode. at exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:443:25)

经过多次随机搜索并未能解决它，我决定冷静地考虑一下。对我来说，这似乎是一个问题ES2015/ES6。包script-ext-html-webpack-plugin使用const变量，这是一个ES2016特性。但是系统无法解决。

这个问题也可能出现在任何包中，比如hapi，selinium等等。但我猜一切都应该有相同的解决方案。

我在上述网站的安装指南上尝试了许多相关命令，但没有任何效果并以同样的错误结束。我也有很多人在网上遇到过同样的问题，但没有具体的答案。谁能帮帮我？

我正在使用 Webpack + html-webpack-plugin 来构建我所有的静态文件。问题是，当我将它与 Google Maps API 一起使用时，它不起作用。

我有这个代码：

和一个 HTML 文件：

如果我只运行这个文件，一切正常。但是如果我运行它，webpack 它会抱怨'initMap 不是一个函数'。我查看了输出内部，似乎 initMap 被声明为不是全局函数，而是作为模块内的函数或类似的函数，所以也许这就是问题所在。

我应该如何将 Google Maps API 与 webpack 一起使用？我知道我可以将一些库与我的脚本捆绑在一起，例如反应，我应该这样做吗？这里应该采用什么方法？

UPD：这是我的 webpack.config.js：

并且输出 HTML 是（我已经script.js从源文件中删除了导入，因为它是由 webpack 添加的，并关闭了最小化，只是为了便于阅读）：

我目前正在使用 WebpackHtmlPlugin 来简化我的 index.html 入口点，但是我的主要问题是 index.html 与所有其他资产处于同一级别（即 publicPath 指向的任何位置）。

我想将 index.html 放在一个文件夹中，并将 webpack 生成的所有资产放在一个子文件夹中。像这样的东西

有没有什么方法可以在不违背 webpack 并手动映射每个资产并将 publicPath 设置为 root 的情况下实现这一点？

我想用 Html Webpack Plugin 生成一个模板。我不想从模板生成 .html 文件，我想从另一个 .ejs 模板生成 .ejs 模板。

我想这样做，以便在从后端渲染模板时，我可以根据环境插入不同的 api 键。例如，我想生成一个看起来像这样的模板：

以便在登台时可以使用测试密钥。

是否可以使用 Html Webpack Plugin 生成模板？

我只想将 html-webpack-plugin用于我的 js 块。Bundle.css 由 extract-text-plugin 生成：

HtmlWebpack插件选项：

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

我想在我的 index.html 中看到类似的内容：

有人可以指出我正确的方向吗？

为了优化构建性能，我正在使用两个单独的配置构建应用程序：第一个包更频繁地更改，因此第二个大包内容不会干扰其重建过程（因为它们在一个配置中，尽管它们是不同的包，仅第一个的重建过程仍然减慢）。

由于只有一个 index.html，它被插入到其中一个配置中，问题是如何big-bundle在生成的 HTML 中包含对的引用，如果它的名称可能根据哈希而变化，则使用 HtmlWebpackPlugin？

实际上，我对使用 HtmlWebpackPlugin 提供的事件挂钩的解决方案有一些想法。但我想知道是否会有其他建议。

尽管我付出了巨大的努力，但我无法获得：

ReactDebugTool.js:14 Uncaught ReferenceError: require is not defined(…)

我编写了一个 webpack 配置，如下所示：

我的项目拥有这样的文件夹结构。

我提到的大多数文章，都表明CommonsChunkPlugin我试图纠正它，但都是徒劳的。任何帮助，将不胜感激。

我可以使css 模块工作，但不能在热重载中工作。

首次加载时，样式以应有的方式显示：

但是在对 css 文件进行更改后，它会中断，并且需要完全重新加载：

我正在使用 css 模块，如下所示：

webpack.config.js

webpack.development.config.js

正如我所注意到的，它尝试在组件中获取的 css 类仍然相同，不应该为每个文件更改/重新加载生成一个新的哈希吗？

是否可以使用 html-webpack-plugin 在头部写入一些块，在正文中写入一些块？

这是我对 html-webpack-plugin 的配置：

当我在此配置中使用副本但更改了块时：

Webpack 仅适用于 html-webpack-plugin 的最后一个块。

我是 angular 2 和 webpack 的新手，并且对它有基本的概念知识。我正在一个有 100 个 html 文件的项目中工作。我无法理解 webpack 如何捆绑 html 文件？我有 html 文件及其各自的组件。所以以下是我脑海中浮现的问题：-

1. 是 webpack 将 html 文件与 js 文件捆绑在一起吗？如果是这样的话怎么做？
2. 如果它只是将所有静态文件沿着它们各自的路径和文件夹复制到输出文件夹中？，如果这样做怎么办？