Question

我正在尝试使用EJS加载器和Html Webpack插件来编译和输出HTML文件，但它一直在渲染这样的文件：

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

这是我的webpack配置：

module.exports = {
  target: 'node',
  entry: './src/server.tsx',
  output: {
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /\.ejs$/, 
        use: {
          loader: 'ejs-webpack-loader',
          options: {
            data: { example: 'test' }
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'output.html',
      inject: false,
      template: path.join(rootDir, '../compiler/templates/index.ejs'),
      { example: 'test' },
      minify: false
    })
  ]
}

这是我的“ index.ejs”文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include ./test.ejs %>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

这是我的“ test.ejs”文件：

<meta charset="UTF-8">

我希望它会输出一个output.html文件，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

但是我得到了：

module.exports = "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n  </head>\n\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"

ejs-webpack-loader似乎可以正常工作并正确注入了部分代码，但随后HtmlWebpackPlugin渲染了JS而不是HTML。

如何获取HtmlWebpackPlugin以正确呈现HTML文件？

Answer 1

您不需要在配置中使用特殊的加载器（ejs-webpack-loader），因为HtmlWebpackPlugin附带了对ejs的支持。

只需尝试将其删除。：]

HTML Webpack插件呈现JS模块而不是HTML文件

1 个答案: