使用帶有EJS文件的HTMLWebpackPlugin

我想使用HTMLWebpackPlugin獲取我的index.ejs模板文件，插入捆綁的資產並輸出最終的index.ejs文件。使用帶有EJS文件的HTMLWebpackPlugin

這個例子有一個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>

當您嘗試的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") 
    ], 
};

來源

2017-05-05 Don P

這是一個非常糟糕的哈克索爾我希望別人對如何做到這一點有真正的答案/理解。

在模板文件（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-插件計算它，它會打印出<%= process.env.API_URL %>到最終模板。

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

來源

2017-05-07 23:03:23

我遇到同樣的問題，並增加一個引號（「）的變量的定義解決了這個問題：

你的情況：

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

來源

2017-11-04 15:31:16 Fernando

使用帶有EJS文件的HTMLWebpackPlugin

回答

相關問題