How to use html-webpack-plugin variable inside ?









up vote
0
down vote

favorite












I am trying to assign variable inside <script> tag by means of html-webpack-plugin where the variable is located.
I can easily use it inside html tags like title
<%= htmlWebpackPlugin.options.applicationId %>



My html-webpack-plugin looks like :



new HtmlWebpackPlugin(
filename: config.build.index,
template: 'index.html',
inject: true,
applicationId : process.env.APPLICATION_ID ?process.env.APPLICATION_ID : 1,
minify:
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: false
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
,
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
),


And I want to use variable applicationId on index.html page with following script :



<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
if (xhr.readyState == XMLHttpRequest.DONE)
document.write(xhr.responseText);

;
var appId = <%= htmlWebpackPlugin.options.applicationId %>;
xhr.open("GET","https://somesite.com/NavigationApi/api/content/get?applicationId=" + appId,false);
xhr.send(null);
</script>









share|improve this question

























    up vote
    0
    down vote

    favorite












    I am trying to assign variable inside <script> tag by means of html-webpack-plugin where the variable is located.
    I can easily use it inside html tags like title
    <%= htmlWebpackPlugin.options.applicationId %>



    My html-webpack-plugin looks like :



    new HtmlWebpackPlugin(
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    applicationId : process.env.APPLICATION_ID ?process.env.APPLICATION_ID : 1,
    minify:
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: false
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
    ,
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
    ),


    And I want to use variable applicationId on index.html page with following script :



    <script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    if (xhr.readyState == XMLHttpRequest.DONE)
    document.write(xhr.responseText);

    ;
    var appId = <%= htmlWebpackPlugin.options.applicationId %>;
    xhr.open("GET","https://somesite.com/NavigationApi/api/content/get?applicationId=" + appId,false);
    xhr.send(null);
    </script>









    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I am trying to assign variable inside <script> tag by means of html-webpack-plugin where the variable is located.
      I can easily use it inside html tags like title
      <%= htmlWebpackPlugin.options.applicationId %>



      My html-webpack-plugin looks like :



      new HtmlWebpackPlugin(
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      applicationId : process.env.APPLICATION_ID ?process.env.APPLICATION_ID : 1,
      minify:
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: false
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      ,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      ),


      And I want to use variable applicationId on index.html page with following script :



      <script type="text/javascript">
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function()
      if (xhr.readyState == XMLHttpRequest.DONE)
      document.write(xhr.responseText);

      ;
      var appId = <%= htmlWebpackPlugin.options.applicationId %>;
      xhr.open("GET","https://somesite.com/NavigationApi/api/content/get?applicationId=" + appId,false);
      xhr.send(null);
      </script>









      share|improve this question













      I am trying to assign variable inside <script> tag by means of html-webpack-plugin where the variable is located.
      I can easily use it inside html tags like title
      <%= htmlWebpackPlugin.options.applicationId %>



      My html-webpack-plugin looks like :



      new HtmlWebpackPlugin(
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      applicationId : process.env.APPLICATION_ID ?process.env.APPLICATION_ID : 1,
      minify:
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: false
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      ,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      ),


      And I want to use variable applicationId on index.html page with following script :



      <script type="text/javascript">
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function()
      if (xhr.readyState == XMLHttpRequest.DONE)
      document.write(xhr.responseText);

      ;
      var appId = <%= htmlWebpackPlugin.options.applicationId %>;
      xhr.open("GET","https://somesite.com/NavigationApi/api/content/get?applicationId=" + appId,false);
      xhr.send(null);
      </script>






      javascript webpack html-webpack-plugin






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 14 hours ago









      Self_taught

      176




      176



























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224037%2fhow-to-use-html-webpack-plugin-variable-inside-script%23new-answer', 'question_page');

          );

          Post as a guest



































          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53224037%2fhow-to-use-html-webpack-plugin-variable-inside-script%23new-answer', 'question_page');

          );

          Post as a guest














































































          Popular posts from this blog

          Use pre created SQLite database for Android project in kotlin

          Darth Vader #20

          Ondo