我有一个Java服务器应用程序，它使用Apache Velocity进行模板化。我想使用webpack来捆绑javascript，并在编译时将捆绑名称注入多个服务器模板文件中。我不能使用HtmlWebpackPlugin，因为模板文件在编译时不是有效的html，所以它会抛出一个错误。
我基本上想将散列后的javascript捆绑包名称注入到一个纯文本文件中，并将文本文件复制到dist。这在webpack中可能吗？
输入：
src/index.js
src/index.vm:
src/login.vm:
<html>
#if(server-logic)
<div>hello</div>
#end
<script src="index.js"></script>
</html>
预期输出：
dist/index.HTSr0MF8.js
dist/index.vm:
src/login.vm:
<html>
#if(server-logic)
<div>hello</div>
#end
<script src="index.HTSr0MF8.js"></script>
</html>
首先，您可以使用HtmlWebpackPlugin将捆绑包名称注入到vm文件中，即使html不是完全结构化的。
您可以将template选项属性指定为js文件，该文件将被执行以获得HTML。此外，指定inject: false以防止默认注入。
// webpack.connfig.js
var path = require('path');
var HtmlWebpackPlugin = require('../..');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
module.exports = {
context: __dirname,
entry: './example.js',
output: {
...
},
module: {
...
},
devtool: 'eval',
plugins: [
new HtmlWebpackPlugin({
template: 'template.js',
inject: false // prevents default injection
}),
]
};
// template.js
// Export a function / promise / or a string:
// This function has to return a string or promised string:
module.exports = function (templateParams) {
// construction of your vm file
var html =
'<html><head>' +
'<title>' +
templateParams.htmlWebpackPlugin.options.title +
'</title>' +
htmlWebpackPlugin.tags.headTags +
'</head><body>' +
htmlWebpackPlugin.tags.bodyTags +
'</body></html>';
return html;
};
基于同构javascript的高级示例