将HTMLWebpackPlugin与EJS文件一起使用

Question

将HTMLWebpackPlugin与EJS文件一起使用

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

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

如何阻止webpack替换变量？

启动"模板":

<!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>

Run Code Online (Sandbox Code Playgroud)

当您尝试运行webpack时:

ERROR in Template execution failed: ReferenceError: API_URL is not defined

期望的结果index.ejs :(有捆绑资产和EJS var)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Don*_*n P 6

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

在模板文件 (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>

Run Code Online (Sandbox Code Playgroud)

在您的 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")
  ],

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	8 年，7 月前
查看次数：	5722 次
最近记录：	7 年，5 月前