为什么基于 Web 的前端捆绑器需要开发服务器

Question

在我从 webpack 切换到 brunch 之前，我从未真正想过它，我在 index.html 中看到以下几行：

<script type="text/javascript">
      require('main');
    </script>

当您尝试简单地打开本地 html 页面时（即使在 webpack 中构建了所有内容之后），它会产生错误（SCRIPT5009：SCRIPT5009：'require' 未定义）并且不会'无法正确呈现，但是当您通过开发服务器打开页面时，它可以正确呈现。

为什么捆绑器需要开发服务器？开发服务器在幕后做了什么以允许浏览器正确呈现带有捆绑包的页面？渲染功能不是内置于浏览器本身吗？

本来我以为是搭个node server 帮忙翻译require()之类的命令，结果上面显示是把line传给了浏览器。为什么浏览器会在您刚打开 html 文件时而不是通过服务器传送该命令时阻塞？

附带说明一下，当页面通过 apache 传送时一切正常。如果它是某种节点转换，那么 apache 如何不阻塞它？

编辑：

显示已交付的文件是：

logo.png（只是一个 vue 标志） app.js（捆绑的 javascript 文件） html 文件，看起来像：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-brunch</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/app.js"></script>
    <script type="text/javascript">
      require('main');
    </script>
  </body>
</html>

一切都是这样交付的，这就是项目的范围。如果 javascript 包中包含 requirejs 那么如果您也只在本地打开文件它也应该可以工作

编辑 2：

在控制台中输入 require 会产生以下结果：

(t,r){null==r&&(r="/");var i=l(t);if(o.call(n,i))return n[i].exports;if(o.call(e,i))return u(i,e[i]);throw new Error("Cannot find module '"+t+"' from '"+r+"'")}:

Answer 1

require 关键字给出了错误，因为它是一种需要外部文件的组合方式。如果您使用 import，标准的本机实现，它将在较新的浏览器上开箱即用。 不需要捆绑器。

要求来自 https://requirejs.org/

他们正在寻找 require 这个词，并且基本上是将源路径中的代码注入到构建文件中。就像我为我的 InjectFileJS 项目创建了一个 injectFile 关键字一样。

<script type="text/javascript">
  injectFile('main');
</script>

这会产生同样的错误，injectFile 未定义。您需要运行我在您的 Web 服务器上编写的文件加载器来解析和转译文件以使该功能存在。

但是，如果您使用 import，您可以不用捆绑器作为新浏览器的要求：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Answer 2

<script src="/app.js"></script>

您正在加载 /app.js，这将定义您的 require 函数。

URL 以 / 开头。

如果您从网络服务器加载它，/ 指的是站点的根目录。

如果您从本地文件系统加载它，那么 / 指的是您的文件系统的根目录（或者磁盘，如果您是 Windows）。这将是错误的地方，因为 webpack 不会在那里生成它（您不希望为使用 webpack 构建的每个应用程序创建 c:\app.js）。

为什么基于 Web 的前端捆绑器需要开发服务器

why are dev servers required for web based front end bundlers

html

javascript

webpack-dev-server