直到我从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
)。