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

Question

I'm trying to use an EJS loader and the Html Webpack Plugin to compile and output an HTML file but it keeps rendering a file like this:

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 和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 个解决方案

解决方案1
0 2020-05-24 17:57:00

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

问题描述

1 个解决方案

解决方案1 0 2020-05-24 17:57:00

解决方案1
0 2020-05-24 17:57:00