无法使用html-webpack-plugin将数据注入模板
我试图使用这个加载器将自定义数据注入到我们的.html模板中，但没有成功。我们已经能够成功地构建我们的资产并注入它们，然而，传递动态数据的能力并不起作用。查看此代码库中提供的示例，我不知道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 your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/index.html',
// inject: 'body',
// hash: true,
title: 'TEST!!!!!!!!!!!',
options: {
title: "TEST!!!!!!!!!!!!!*"
},
chunks: ['vendor', 'app']
}),
// Automatically move all modules defined outside of application directory to vendor bundle.
// If you are using more complicated project structure, consider to specify common chunks manually.
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: module => /node_modules/.test(module.resource)
})
]
};模板文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="NG6-Starter by @AngularClass">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<base href="/">
</head>
<body ng-app="app" ng-strict-di ng-cloak>
<%= htmlWebpackPlugin.options.title %>
<%= htmlWebpackPlugin.title %>
<%= title %>
<%= '\<\%\= htmlWebpackPlugin.title \%\>' %>
<%= '\<\%\= htmlWebpackPlugin.options \%\>' %>
</body>
</html>回答 3
Stack Overflow用户
发布于 2017-07-21 04:12:14
因此，问题在于html或raw加载程序正在控制所有的.html文件，因此html-webpack-plugin无法执行它所需的操作。您实际上需要做的是让raw或html加载器根据需要指向所有内容，但要排除传递给html-webpack-plugin的template文件。
参考：https://github.com/jantimon/html-webpack-plugin/issues/747#issuecomment-316804313
Stack Overflow用户
发布于 2017-07-21 03:32:53
正确的选项是：
<%= htmlWebpackPlugin.options.title %>这是EJS语法。它对表达式求值并将结果放入HTML中。这意味着它需要像这样放在<head>中：
<title><%= htmlWebpackPlugin.options.title %></title>您的模板不起作用的原因是您已经将raw-loader配置为用于.html文件。这意味着该模板被视为HTML文件。html-webpack-plugin一个备用ejs加载器，只有在没有为给定文件配置加载器的情况下才会使用。在模板中使用.ejs而不是.html是一个好主意，这样就不会与加载器冲突。另请参阅The template option了解其他解决方案(例如，如果您想使用其他模板引擎)。
将client/index.html重命名为client/index.ejs。
new HtmlWebpackPlugin({
template: 'client/index.ejs',
// inject: 'body',
// hash: true,
title: 'TEST!!!!!!!!!!!',
chunks: ['vendor', 'app']
}),您链接的存储库使用了许多东西的旧版本(例如webpack和html-webpack-plugin )，而html-webpack-plugin的版本似乎不能与上面的配置一起工作。您需要使用以下命令进行升级：
npm install --save-dev html-webpack-plugin@latestStack Overflow用户
发布于 2019-05-24 23:49:38
您可以在没有额外加载器的情况下执行以下操作(至少使用html-webpack-plugin@3.2.0)：
new HtmlWebpackPlugin({
template: 'index.html',
templateParameters: {
title: 'foo',
content: 'bar'
}
})<!doctype html>
<html lang="en">
<head>
<title><%= title %></title>
</head>
<body>
<p><%= content %></p>
</body>
</html>请注意，这是EJS语法，但它也适用于常规的.html文件。
https://stackoverflow.com/questions/45223299
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号