我已经将其设为 github 问题,但我怀疑可能存在一些我不知道的微不足道的问题。
我非常感谢您提供一些帮助我进行调试的输入。
演示:
https://github.com/andrasna/html-ejs-webpack-config-issue-demo
索引.ejs
<% const title = 'Hello' %>
<%- include('partial') -%>
<h1><%= `${title} World` %></h1>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.ejs',
})
]
}
预期行为
我正在尝试根据文档将一个 EJS 文件包含到另一个文件中:
<%- include('header'); -%>
<h1>
Title
</h1>
<p>
My page
</p>
<%- include('footer'); -%>
我希望 partial.ejs
中的 HTML 包含在 index.ejs
文件中。
当前行为
我收到“错误:子编译失败”(请参阅下面的完整错误消息)。
但是,如果我在 index.ejs
中删除带有 include
的行,EJS 会被编译。这就是为什么我认为问题是特定于包含的。
有什么想法吗?
错误信息
> npm start
> html-ejs-webpack-config-issue-demo@1.0.0 start /Users/user/Dev/html-ejs-webpack-config--issue-demo
> webpack-dev-server --mode development
ℹ 「wds」: Project is running at http://localhost:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/user/Dev/html-ejs-webpack-config--issue-demo
✖ 「wdm」: Hash: f9f8666f87ab7acd22cd
Version: webpack 4.41.2
Time: 595ms
Built at: 19/10/2019 15:34:18
Asset Size Chunks Chunk Names
index.html 1.72 KiB [emitted]
main.js 360 KiB main [emitted] main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 0 bytes {main} [built]
+ 18 hidden modules
ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )
- Function
- lodash.js:14870
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14870:16
- lodash.js:473 apply
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:473:27
- lodash.js:15254
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:15254:16
- lodash.js:475 apply
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:475:27
- lodash.js:6563
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:6563:16
- lodash.js:14869 Function.template
[html-ejs-webpack-config--issue-demo]/[lodash]/lodash.js:14869:20
- SyntaxError: Unexpected token )
- compiler.js:79 childCompiler.runAsChild
[html-ejs-webpack-config--issue-demo]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:343 compile
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:681 hooks.afterCompile.callAsync.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:681:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20
- Compiler.js:678 compilation.seal.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compiler.js:678:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[html-ejs-webpack-config--issue-demo]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1423 hooks.optimizeAssets.callAsync.err
[html-ejs-webpack-config--issue-demo]/[webpack]/lib/Compilation.js:1423:35
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] 922 bytes {0} [built] [failed] [1 error]
ERROR in ./index.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs)
Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
SyntaxError: Unexpected token )
at Function (<anonymous>)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14870:16
at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:473:27)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:15254:16
at apply (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:475:27)
at /Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:6563:16
at Function.template (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/lodash/lodash.js:14869:20)
at Object.module.exports (/Users/user/Dev/html-ejs-webpack-config--issue-demo/node_modules/html-webpack-plugin/lib/loader.js:28:22)
ℹ 「wdm」: Failed to compile.
最佳答案
使用ejs-compiled-loader使用 HtmlWebpackPlugin
npm install --save-dev ejs-compiled-loader
将 webpack.config.js 更改为:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: '!!ejs-compiled-loader!index.ejs', //Here is the Loader plugged in
})
]
}
然后将您的模板更改为有效的 EJS。 HtmlWebpackPlugin 说:"By default (if you don't specify any loader in any way) a fallback lodash loader kicks in."它使用 lodash 将模板呈现为简约的加载器。这就是您的错误来自 lodash.js 的原因。
index.ejs:
<% title = 'Hello' %>
<%- include partial -%>
<h1><%= title%> World</h1>
然后 npm start
和您新编译的“Lorem Ipsum ...Hello World”将在您的本地主机上提供服务。
或者 npx webpack --mode=development
让你的 'dist/index.html' 享受源代码:)
关于javascript - 当我尝试对 EJS 文件使用 include 时,编译失败。 (错误 : Child compilation failed.),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58464497/