webpack - 将HTMLWebpackPlugin与EJS文件一起使用-6ren

webpack - 将HTMLWebpackPlugin与EJS文件一起使用

转载作者：行者123 更新时间：2023-12-04 15:31:01

25

4

我想使用HTMLWebpackPlugin来获取index.ejs模板文件，插入捆绑的 Assets ，并输出最终的index.ejs文件。

这个例子有一个EJS变量<%= API_URL %>，但是webpack正在解释它。

如何停止webpack替换变量？

起始"template":

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Monitor</title>
    <script>
      window.config = {
        API_URL: "<%= API_URL %>"
      }
    </script>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

尝试运行Webpack时:
ERROR in Template execution failed: ReferenceError: API_URL is not defined
所需的结果index.ejs :(具有 Assets 和EJS变量)

监视器

window.config = {
API_URL:“<％= API_URL％>”
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    bundle: './src/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/
    },
    {
      // CSS is imported in app.js.
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: ["css-loader", "sass-loader"]
      })
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        'API_URL': JSON.stringify(process.env.API_URL)
      }
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      inject: true
    }),
    new ExtractTextPlugin("styles.css")
  ],
};

最佳答案

这是一个非常糟糕的hacky解决方案，我希望其他人对此有一个真正的答案/理解。

在您的模板文件(index.ejs)中，执行以下操作:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Monitor</title>
    <script>
      window.config = {
        API_URL: "<%= htmlWebpackPlugin.options.API_URL_TEMPLATE_VAR %>"
      }
    </script>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

在您的webpack配置中，执行此操作(相关部分是新的HtmlWebpackPlugin，我在其中定义了一个变量。:

plugins: [
    // Define environment variables that are accessible inside of app javascript.
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
    // Adds bundled file links to the index.html
    new HtmlWebpackPlugin({
      // The input file name
      template: 'src/index.prod.ejs',
      // Injects scripts into the <body>
      inject: true,
      // This is so hacky. I inject a string so the built .ejs file has this template var. Lets us set api_url when server is started instead of at bundle time.
      API_URL_TEMPLATE_VAR: '<%= process.env.API_URL %>',
      // The output file name
      filename: 'index.ejs'
    }),
    new ExtractTextPlugin("styles.css")
  ],

因为我定义了 API_URL_TEMPLATE_VAR，所以当html-webpack-plugin对其进行评估时，它将把 <%= process.env.API_URL %>打印到最终模板中。

哈克，但行得通。不接受我自己的答案/等待更好的答案。

关于webpack - 将HTMLWebpackPlugin与EJS文件一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43815032/

25

4

0

文章推荐： web-applications - 如何判断 Web 应用程序是否使用代码拆分

文章推荐： polymer - 如何在 polymer 中使用自定义字体

文章推荐： jenkins - 如何以编程方式获取Jenkins中的触发器信息

EJS 包含在单独的 ejs 文件中定义的函数
我正在尝试包含一个 ejs 文件，其中包含用于设置我的 View 的函数。这些函数被定义为使用助手。我试过使用: 但是当我尝试使用这个文件中的函数时: 我收到错误: Reference Error
ejs - 你如何预编译 ejs 模板到文件
所以我想将 ejs 模板预编译成 .js 文件 var compiled = ejs.compile(source); fs.writeFileSync(target, 'myTemplateFunc
ejs - 如何在 EJS 中包含带参数的模板？
作为一个真正的 EJS 初学者，我的 html 页面中有两个图表，所以我想使用我的部分两次: 但是我需要在 ejs 内部传递一些参数来区分图形。什么是最好的方法？最佳答案 @Naeem Shai
ejs - VSCode 中的 .ejs 格式化
这是我的问题 - 它不可读为了让 .ejs 正常工作，到目前为止我已经添加了以下内容。我也有格式保存和更漂亮。我正在寻找获得更好格式的建议，以便我可以阅读。 "files.associations"
ejs - 使用 EJS 如何插入值(如果存在)
为什么这不起作用: value="" /> 它抛出一个引用错误，说 givenName 未定义，它可能不是，并且是条件的原因。最佳答案抢你要查if (locals.givenName) v
ejs - NestJs 电子邮件无法使用 ejs 模板动态数据发送
我正在尝试使用@nestjs-modules/mailer nodemailer 在 Nestjs 框架中发送电子邮件。电子邮件在正常文本下工作正常，但是当设置为使用 EJS 模板作为电子邮件正文时，
css - Ejs - 我们如何将鼠标悬停在 ejs 文件中？
我想实现一个功能。我的应用程序是用 AngularJS 和 NodeJS 制作的。我正在发送一封电子邮件，在该电子邮件中我有一个可以单击的按钮。 " styl
javascript - 此 .ejs 文件中的 else 语句显示错误 "Unexpected token else in/home/ubuntu/workspace/v1/views/home.ejs while compiling ejs"
这是代码，请帮忙。提前致谢。最佳答案 else之前的标签必须与前一个标签的结束标签配对。
ejs - 用于原子的 Emmet 和 EJS 不起作用
我最近利用了来自 github 的 github student developer package 并下载了 Atom.io。到目前为止，我一直喜欢它的功能，主要是将 ejs 文件的语法突出显示为
ejs - 可以在 PWA 中使用 EJS 等模板引擎吗？
我正在学习编写渐进式 Web 应用程序，所有示例都使用 html 文件。我更喜欢将 EJS 与节点服务器一起使用。是否可以缓存 ejs 以便可以在本地使用？最佳答案简短的回答:是的。 Servic
javascript - ejs - 希望在 EJS 模板中添加 if 条件
嗨，我刚刚开始使用 EJS。现在我需要检查条件，因此我在 EJS 中使用 if 条件，但在运行时显示错误。我正在尝试的代码是
javascript - 如何将变量从 EJS 页面传递到另一个 EJS 页面
您好我如何将变量从一个EJS页面传递到另一个EJS页面。例如，我有这个页面 // insertion.ejs //
ejs - 如何在 cli 中使用 ejs lint
我在节点上使用 EJS 作为我的 View 引擎并进行快速设置。我想使用 ejs-lint 来帮助获取错误行。我以前没有使用过 linter，但是通过阅读这里的文档:https://github.co
javascript - EJS - 更新数据库中的数据，无需从 EJS 重新加载页面
我正在创建类似 reddit 评论部分的内容，有人可以评论某些内容，人们也可以回复该评论。我正在使用 Node、Express、MySQL、EJS。问题:我不知道如何制作赞成/反对部分，我不知道如
javascript - NodeJs - 如何在呈现的 EJS 中呈现 EJS？
这是我的想法:我想加载一个呈现的 ejs 文件作为我的主模板 ejs 文件的主体。可能吗？我的 app.js: router.get('/', function(req, res) { res.
javascript - 如何转义 ejs 模板字符串中的 ejs 标签？
我们如何在模板中转义 ejs 标签本身？在 sails 中，我想将以下代码放入layout.ejs 但默认情况下，内的所有内容
javascript - 如何正确引用另一个 EJS 文件中定义的 EJS 函数？
文件 1:ejsfunction.ejs 文件 2:file.ejs 输出: ReferenceError: 1| >> 2| funcTest is not defined 嗨，
javascript - Express + EJS - 将参数传递给 EJS View
我是 Node.js/Express/EJS 的新手。我最近注意到，当我将参数从 Express 请求处理程序传递到 EJS View 并省略参数名称时，它会根据变量名称创建一个名称。因此，例如，在
node.js - EJS - 包含返回找不到包含文件 "header.ejs"
我尝试像这样用 ejs 渲染 html const ejs = require('ejs'), fs = require('fs'), str = fs.readFileSyn
ejs - ejs.co 和 embeddedjs.com 之间的关系
这两个网站似乎都描述了一种非常相似的基于 Javascript 的模板语言，称为 EJS。但是: ejs.co 说 E 代表“有效”并且有一个活跃的存储库 on Github . Embeddedjs

首页

博学

6Ren·AI

商城

webpack - 将HTMLWebpackPlugin与EJS文件一起使用