我正在使用 webpack 来构建我的 React 应用程序。我只想知道有没有办法生成 html 的脚本选项卡，文件名中有版本号，如 .
我试图探索 HtmlWebpackPlugin 但一无所获。任何人都可以给我一个方向，是否有可用的插件来执行此操作，或者我必须编写自己的脚本。
谢谢
我是第一次使用 webpack，我对 webpack 不是很彻底。我正在使用 angular - ES6 - bable 并且我正在尝试使用 webpack-angular-translate。
我收到以下错误：
./~/html-webpack-plugin/lib/loader.js! 中的错误！./src/index.html 模块解析失败：/Users/samirshah/Desktop/nuskin_translate/node_modules/html-webpack-plugin/lib/loader。 js!/Users/samirshah/Desktop/nuskin_translate/node_modules/webpack-angular-translate/dist/html/html-loader.js!/Users/samirshah/Desktop/nuskin_translate/src/index.html 意外令牌 (1:0)
您可能需要一个合适的加载器来处理这种文件类型。
我正在尝试在模块中设置预加载器。当我尝试设置 html 的预加载器时，出现上述错误。
preLoaders: [
{
test: /\.html$/,
loader: WebPackAngularTranslate.htmlLoader()
}
],
WebPackAngularTranslate.jsLoader() 工作正常。我不确定为什么 WebPackAngularTranslate.htmlLoader() 会抛出错误。
任何人都遇到过类似的问题。请在这里帮助我。
提前致谢。
这是我的配置文件：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var WebPackAngularTranslate = require("webpack-angular-translate");
module.exports = {
debug: true,
entry: {
vendor: ["jquery", "angular"],
bundle: ['babel-polyfill', './src/app.js'],
}, …我正在按照他们的文档尝试用于 Webpack 的 html-webpack-plugin。但它似乎没有生成所需的 html 文件。我创建了一个小型的基本项目来重现该错误。github 项目以突出显示错误，如果有人能指出我的错误，我将不胜感激。使用以下脚本在项目目录中查看结果：
npm install
node_modules/.bin/webpack
我最近删除了所有内容node_modules并重新创建了npm install. 并不断收到此错误：
ERROR in Error: Child compilation failed:
Cannot find module 'handlebars'
- compiler.js:76
[wallet-admin]/[html-webpack-plugin]/lib/compiler.js:76:16
- Compiler.js:214 Compiler.<anonymous>
[wallet-admin]/[webpack]/lib/Compiler.js:214:10
- Compiler.js:403
[wallet-admin]/[webpack]/lib/Compiler.js:403:12
- Tapable.js:67 Compiler.next
[wallet-admin]/[tapable]/lib/Tapable.js:67:11
- CachePlugin.js:40 Compiler.<anonymous>
[wallet-admin]/[webpack]/lib/CachePlugin.js:40:4
- Tapable.js:71 Compiler.applyPluginsAsync
[wallet-admin]/[tapable]/lib/Tapable.js:71:13
- Compiler.js:400 Compiler.<anonymous>
[wallet-admin]/[webpack]/lib/Compiler.js:400:9
Child html-webpack-plugin for "index.html":
ERROR in Cannot find module 'handlebars'
不知道发生了什么......我已经尝试更改所有版本：
html-webpack-plugin, webpack，handlebars-loader认为这是一个版本问题。似乎不是。有任何想法吗？
我相信我已经到处寻找，但我空手而归。我一直在使用从我的源html-webpack-plugin加载单个index.html文件，但我的客户端附带了一些本地化，我认为如果我可以动态添加它们会很棒。
所以我试图切换到使用带有html-webpack-plugin, 即的模板引擎ejs，但我遇到了重大问题！
我想html-webpack-plugin渲染和.ejs归档，我需要给这个.ejs文件一个巨大的本地化对象。
我想要这样的东西：
<h1><%= header.title %></h1>
来自这样的本地化.json文件：
{
"header": {
"title": "My Clients Super Awesome Website"
}
}
我试过使用两个不同的 ejs webpack 加载器，但我根本不知道如何将一个简单的对象传递给 ejs 加载器，我可以在我的 ejs 文件中使用它。
希望你们有一些答案：D 提前致谢。
我尝试使用此加载程序将自定义数据注入到我们的 .html 模板中，但没有成功。我们已经能够成功构建我们的资产并注入它们，但是，传递动态数据的能力并没有奏效。查看此 repo 中提供的示例，我没有看到 options.title 是如何传递到模板中的。
我正在使用这个入门工具包，这个插件非常简单：https : //github.com/AngularClass/NG6-starter
以下是相关依赖项的版本：
"webpack": "^2.2.1"
"html-webpack-plugin": "^2.29.0"
从 webpack.config.js 复制相关部分：
module.exports = {
devtool: 'source-map',
entry: {
app: [
'babel-polyfill',
path.join(__dirname, 'client', 'app/app.js')
]
},
module: {
loaders: [
{ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate-loader!babel-loader' },
{ test: /\.html$/, loader: 'raw-loader' }, // have also tried with the html-loader
{ test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
plugins: [
// Injects bundles in …有没有一种方法可以使用webpack在另一部分中包含html部分？我正在使用html-loader执行此操作：
index.html
<%= require('html-loader!./partials/_header.html') %>
但是，当我尝试在_header.html中包含另一个部分时，它无法呈现它。
这不起作用：
_header.html
<%= require('html-loader!./partials/_nav.html') %>
我正在尝试htmlWebpackPlugin.files.css从 Pug 模板访问，但我的构建失败了，因为这是未定义的。
我希望我能够link为每个 css 文件插入一个标签。谁能告诉我为什么我的 pug 模板看不到数据，如自述文件（https://github.com/jantimon/html-webpack-plugin）中所述？
这是我的 webpack.config.js 文件的当前内容：
const path = require('path');
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = env => {
return {
mode: env.mode,
entry: {
vendor: ['jquery', 'jquery-ui', 'jquery-validation', 'js-cookie', 'qtip2'],
bundle: './src/scripts/bundle.js',
global: './src/scripts/global.js',
index: [
'./src/index.js',
'./src/scripts/branch.js'
],
maincss: './src/scss/main.scss',
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js'
},
devtool: 'inline-source-map',
devServer: { …我们一直在使用，HtmlWebpackInlineSourcePlugin没有问题，但它不再受支持，所以我们转向InlineChunkHtmlPlugin适用于 JS 的，但拒绝捕获输出style.css文件并将其内联，让我们没有样式。
有什么方法可以在不构建粗略的自定义解决方案的情况下内联 CSS？
有很多与我类似的问题，但我找到的所有答案都依赖于现在未维护的HtmlWebpackInlineSourcePlugin插件。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
module.exports = {
// ... our other configuration options, loaders, etc
plugins: [
new CleanWebpackPlugin(pathsToClean),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
template: './template.html',
// inject: 'body',
inject: true,
filename: './output.html',
inlineSource: '.(js|css)$',
chunks: ['chunk'],
}),
// new HtmlWebpackInlineSourcePlugin(); // Used to work for loading JS & CSS
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]); // Only loads …我试过包含一个通配符，它破坏了构建；和多个favicon字段条目，仅使用最后一个输入。我如何支持使用此插件包含多个网站图标文件？