Question

所以我在这个webpack中有点新东西。现在我的项目看起来像这样

|- package.json
|- webpack.config.js
|- /dist
  |- index.html
  |- bundle.js
|- /src
  |- index.js
|- /node_modules

我在我的index.html文件中包含了bundle.js，请指定一个＆lt;脚本＆gt;标签。现在我想将index.html移动到我的项目的根目录，因为我不想在我的存储库中包含/ dist文件夹，但是新的bundle.js路径＆lt; script src =＆＃34; dist / bundle.js＆＃34;＆gt;似乎不再工作了。有谁知道如何在index.html中包含来自不同文件夹的文件，或者我可以使用哪些其他选项来使其正常工作？

修改

我没有移动bundle.js，因为每次运行npm run build时都会创建/更新它。所以我希望我的proyect看起来像这样

|- package.json
|- webpack.config.js
|- index.html
|- /dist
  |- bundle.js
|- /src
  |- index.js
|- /node_modules

Answer 1

当您撰写相对链接的@returns {ClassFoo}时。您指定<script src="dist/bundle.js">文件存在于名为bundle.js的文件夹中，该文件夹是（dist）所包含文件的兄弟。< / p>

移动这两个文件后，我假设您的结构现在看起来像这样：

index.html

因此，您不再需要网址的|- package.json |- webpack.config.js |- /dist /* Unwanted */ |- bundle.js |- index.html |- /src |- index.js |- /node_modules部分，并且有三个选项：

您可以使用相对链接 dist说明bundle.js与bundle.js位于同一文件夹中
您可以使用根相对链接 index.html来引用相对于根的捆绑（请注意前面的斜杠）
您可以使用绝对链接 /bundle.js来加载托管版本或绝对引用您自己的网站

如需进一步阅读相对和绝对网址，建议您查看 Coffee Cup article 。

Hvaing说，请注意，为了简单地“忽略”您的存储库中的https://example.com/bundle.js文件夹，您可能正在寻找dist。如果您在项目的根目录中设置了.gitignore文件，只需在其中键入.gitignore，您的Git就会自动排除dist/文件夹以及您提交中包含的所有文件。

希望这有帮助！：）

使用Webpack链接index.html中的外部文件

1 个答案: