需要带有 HTML Webpack 插件的变量 [英] Require variable with HTML Webpack Plugin
问题描述
基于此示例(https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/custom-template) 我创建了一个类似的设置，它需要通过环境变量的子 html 文件.
based on this Example (https://github.com/ampedandwired/html-webpack-plugin/tree/master/examples/custom-template) I created an similar setup which requires the sub html file via an environment var.
function generate_page(config) {
var tempateUrl = config.templateUrl ? config.templateUrl : 'src/template.html';
return new HtmlWebpackPlugin({
filename: config.filename,
template: tempateUrl,
xhtml: true,
environment: {templateUrl: config. subTemplateUrl}
});
}
我的 src/template.html 需要这个子模板:
My src/template.html requires this subtemplate:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<% require('html!'+ htmlWebpackPlugin.options.environment.templateUrl ) %>
</body>
</html>
但是当我运行 webpack --progress --colors --watch -d 时，我得到了那个错误:
But when I run webpack --progress --colors --watch -d I just get that error:
ERROR in Template execution failed: Error: Cannot find module "."
ERROR in Error: Cannot find module "."
- template.html:57 webpackMissingModule
/Users/xxx/PycharmProjects/webpack-test/src/template.html:57:47
- template.html:57
/Users/xxx/PycharmProjects/webpack-test/src/template.html:57:125
- template.html:62 module.exports
/Users/xxx/PycharmProjects/webpack-test/src/template.html:62:4
- index.js:228
[webpack-test]/[html-webpack-plugin]/index.js:228:16
- util.js:16 tryCatcher
[webpack-test]/[bluebird]/js/release/util.js:16:23
- promise.js:503 Promise._settlePromiseFromHandler
[webpack-test]/[bluebird]/js/release/promise.js:503:31
- promise.js:560 Promise._settlePromise
[webpack-test]/[bluebird]/js/release/promise.js:560:18
- promise.js:597 Promise._settlePromiseCtx
[webpack-test]/[bluebird]/js/release/promise.js:597:10
- async.js:131 Async._drainQueue
[webpack-test]/[bluebird]/js/release/async.js:131:12
- async.js:136 Async._drainQueues
[webpack-test]/[bluebird]/js/release/async.js:136:10
如果我在 template.html 文件中写入相同的 subTemplateUrl 而不是变量，则一切正常:
If I write the same subTemplateUrl in the template.html file instead of the variable everything works fine:
<% require('html!./test.html' ) %>
推荐答案
${ require('html!./' +htmlWebpackPlugin.options.environment.templateUrl + '.html' ) }
我发现无论使用 ${ 还是 <% 都可以.在这个插件中它们是相等的.require 必须像这样设置加载器路径 html../，../ 不能从 out.
I found whatever using ${ or <% that's ok. it's equal both they in this plugin.
require must set loader path like this html../, the ../ can't pass from out.
<%=require('html!./' +htmlWebpackPlugin.options.environment.templateUrl + '.html' ) %> 也没关系.
但是使用 ${ require('html!' + htmlWebpackPlugin.options.environment.templateUrl + '.html' ) } (路径 ./包含在 templateUrl 变量中)效率不高.
but using the way that ${ require('html!' + htmlWebpackPlugin.options.environment.templateUrl + '.html' ) } (the path ./ include in the templateUrl variable) is not efficient.
这篇关于需要带有 HTML Webpack 插件的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
