Question

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

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

如何阻止webpack替换变量？

开始＆＃34;模板＆＃34;：

<!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 :(已捆绑资产和EJS var）

监控 window.config = { API_URL：＆＃34;＆lt;％= API_URL％＆gt;＆＃34; }

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")
  ],
};

Answer 1

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

在模板文件（index.ejs）中，执行以下操作：

API_URL_TEMPLATE_VAR

在你的webpack配置中，执行此操作（相关部分是我定义变量的新HtmlWebpackPlugin：

<%= process.env.API_URL %>

因为我定义了for num in range(1, 10): print (num) while num < 100: num = num ** 2 print(str(num))，当html-webpack-plugin对它进行评估时，它会将| user | product_id | file_download | date_accessed | ----------------------------------------------------------------- | tom | 1104 | file_1.pdf | 2017-05-06 00:00:00 | | tom | 1048 | file_3.pdf | 2017-05-06 00:00:00 | | tom | 1048 | file_3.pdf | 2017-05-06 00:00:00 | | tom | 1048 | file_3.pdf | 2017-05-06 00:00:00 | | tom | 1048 | file_3.pdf | 2017-05-06 00:00:00 | | tom | 1010 | file_3.pdf | 2017-05-06 00:00:00 | | tom | 1077 | file_3.pdf | 2017-05-06 00:00:00 | | sue | 1749 | file_2.pdf | 2017-05-06 00:00:00 | | sue | 1284 | file_3.pdf | 2017-05-06 00:00:00 | | sue | 1284 | file_3.pdf | 2017-05-06 00:00:00 | | sue | 1065 | file_1.pdf | 2017-05-06 00:00:00 | | sue | 1344 | file_3.pdf | 2017-05-06 00:00:00 | | sue | 2504 | file_2.pdf | 2017-05-06 00:00:00 |打印到最终模板中。

Hacky，但有效。不接受我自己的答案/等待更好的答案。

Answer 2

我遇到了同样的问题，并在变量的定义中添加引号（＆＃34;）解决了它：

在你的情况下：

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'API_URL': '"' + JSON.stringify(process.env.API_URL) + '"'
  }
})
...

Answer 3

HTMLWebpackPlugin为此使用lodash.template，并且应该很可能将其默认分隔符更改为<?之类，尽管这不是很容易，所以您可以将<%分隔符用于前端。但是，如果您将ejs包用于前端，则在此更改定界符并为webpack保留常规定界符会容易得多。

ejs：

<div>
  <%=SOME_WEBPACK_VAR%>
  <br />
  <?=SOME_EJS_VAR%>
</div>

javascript：

ejs.render(yourHtml, {SOME_EJS_VAR: 'foo'}, {delimiter: '?'});

Answer 4

如果您希望 Webpack 从构建中忽略您的文件，您可以像这样在文件路径前添加 raw-loader：

new HtmlWebpackPlugin({
    inject: true,
    filename: "index.ejs",
    template: "!!raw-loader!" + 'src/index.ejs',
}),

如果您想直接从 Webpack 将变量注入模板，您可以使用名为 react-dev-utils 的依赖项，它有一个非常方便的插件：

new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
   PUBLIC_URL: publicUrl,
  // You can pass any key-value pairs, this was just an example.
  // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
}),

我自己没有尝试过 ejs 模板，但我认为它没有理由不工作。

将HTMLWebpackPlugin与EJS文件一起使用

4 个答案: