直到我从webpack切换到brunch,在index.html中看到了以下几行,我才真正想到这一点:

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

当您试图简单地打开一个本地html页面(即使在webpack中构建了所有内容之后),它也会产生错误(SCRIPT5009:SCRIPT5009:“require”未定义),并且不会正确呈现,但是当您通过开发服务器打开该页面时,它会正确呈现。
为什么捆绑器需要开发服务器?dev服务器在幕后做什么来允许浏览器正确地呈现带有bundle的页面?渲染功能不是内置在浏览器中吗?
最初我以为它是在建立一个节点服务器来帮助翻译诸如require()之类的命令,但是上面的代码表明这行代码是通过浏览器传递的。为什么当你打开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+"'")}:

最佳答案

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

您正在加载将定义您的/app.js函数的require
URL以/开头。
如果从web服务器加载,则/表示站点的根目录。
如果从本地文件系统加载,则/指的是文件系统的根目录(如果您是Windows,则指磁盘)。这将是错误的位置,因为webpack不会在那里生成它(您不希望为使用webpack构建的每个应用程序创建c:\app.js)。

09-17 14:53
查看更多