Question

我如何让index.html从不同的地方加载JS文件，具体取决于我的环境？

开发时我希望我的文件src成为绝对路径：/dist/bundle.js

在制作中，我希望我的文件的src成为相对路径：dist/bundle.js

以下是加载文件的HTML：

<!doctype html>
<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="/dist/bundle.js"></script>
  </body>
</html>

如果有用，我正在使用Webpack。

Answer 1

您已经提到正在使用webpack，我假设使用不同的配置进行开发和生产。

您可以尝试html-webpack-plugin并将其设置为在index.html文件中注入脚本。这样，脚本将根据webpack输出设置注入HTML。您可能需要相应地调整配置。如果这不起作用，webpack-path-rewriter似乎也是一个选项，但我还没有尝试过。

或者您可以编写一个小脚本来确定基于document.location.hostname的环境，然后包含一个具有正确src路径的<script>。但这种方法似乎并不正确，并且很容易改变域名。

但我同意@Makyen的观点，让环境变得相同。我认为制作一个更难以改变，所以尽量将它与你在开发中所做的任何事情相匹配。

让HTML从不同的地方加载JS文件，具体取决于环境

1 个答案: