HTMLWebpackPlugin을 EJS 파일과 함께 사용

HTMLWebpackPlugin을 사용하여 index.ejs 템플릿 파일을 가져 와서 내 번들 애셋을 삽입하고 최종 파일 index.ejs을 출력하고 싶습니다.HTMLWebpackPlugin을 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>

당신이 웹팩 실행하려고 :

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

정말 나쁜 해킹 졸입니다. ution, 그리고 나는 다른 누군가가 이것을하는 방법에 대한 진정한 답/이해력을 가지기를 바랍니다. 템플릿 파일에서

(index.ejs), 이렇게 : 나는 변수 :

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

을 정의 할 경우

당신의 웹팩 설정에서

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

는이 (관련 부분을하는 새로운 HtmlWebpackPlugin입니다 내가 API_URL_TEMPLATE_VAR을 정의하기 때문에 HTML-웹팩 - 플러그인을 평가할 때

은, 그것은

. 최종 템플릿에 해키을 <%= process.env.API_URL %>를 인쇄하지만, 법과 것 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

HTMLWebpackPlugin을 EJS 파일과 함께 사용

답변

관련 문제