[尝试在EJS文件中使用include时无法编译。 （错误：子编译失败。）

Question

我已经将此问题作为github问题了，但是我怀疑可能有些琐碎的事情，我只是不知道。

我非常感谢您提供一些帮助调试的信息。

演示：

https://github.com/andrasna/html-ejs-webpack-config-issue-demo

index.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文件包含到另一个文件中：

https://ejs.co/#docs

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

我希望的是partial.ejs中的HTML包含在index.ejs文件中。

当前行为

我收到“错误：子编译失败”（请参阅​​下面的完整错误消息。）>

但是，如果我删除include中带有index.ejs的行，则会编译EJS。这就是为什么我认为该问题特定于包括在内。

有什么想法吗？

错误消息

> npm start

> [email protected] 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.

我已经将此问题作为github问题了，但是我怀疑可能有些琐碎的事，我只是不知道。我非常感谢您提供一些帮助调试的信息。演示：...

Answer 1

您尝试使用部分路径还是相对路径？有一个线程here，其中包含有关包含ejs文件的示例。关于子编译失败，有一篇关于使用ejs here的Webpack配置的文章。希望对您有所帮助。