如何在里面使用html-webpack-plugin变量？

Question

我试图通过html-webpack-plugin在变量所在的位置分配<script>标签内的变量。我可以轻松地在标题<%= htmlWebpackPlugin.options.applicationId %>等html标签中使用它

我的html-webpack-plugin看起来像：

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'
    }),

我想在index.html页面上使用变量applicationId和以下脚本：

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

Answer 1

您可以设置一个隐藏的输入并在那里设置appId，然后您可以使用javascript检索该值（确保在jquery的onload事件中执行该操作，或者如果您想使用vanilla JS，请使用DOMContentLoaded），希望这会有所帮助。