内联 Webpack JS 文件不起作用答案

【问题标题】：Inlined Webpack JS file doesn't work内联 Webpack JS 文件不起作用
【发布时间】：2017-01-03 09:21:49
【问题描述】：

我有一个 webpack 项目（基于 https://github.com/vuejs/vue-webpack-example），它生成一个 index.html 文件和一个包含应用程序的 javascript 文件。

当我像这样包含 JavaScript 时，一切正常：

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

当我尝试将 static/js/app.js 的内容直接包含在脚本标记中时（因为我们需要以单个 .html 文件结尾），它不再起作用了。看起来javascript根本没有被执行：

<script>!function(e){function t(i){if(n[i])return...</script>

我将应用程序提取到 3 个文件（manifest.js、vendor.js 和 app.js）中，其中 vendor.js 包含我需要的来自 node_modules 的库。只要我不直接包含 vendor.js，它就可以工作。所以我可以内联 manifest.js 和 app.js 但不能内联 vendor.js。

任何想法为什么内联 js 不起作用但通过 url 包含的 js 起作用？直到现在我都认为 js 的行为完全一样，不管它是如何包含的。

【问题讨论】：

如果内联脚本与文件中的脚本相同，则其工作方式相同。您可以在帖子中包含脚本的最后一部分吗？喜欢<script>!function(e){...}(whatever_you_are_passing_in)</script>
是的，这就是我的预期。该文件超过 1mb，因为它是一个完整的 vue.js 应用程序，我不能在这里分享。我希望在处理这些文件时会有一点不同。也许有一些js函数的行为不同/直接包含时不起作用？
按照我在上面评论中的要求做...这将有助于理解该函数应该如何执行。我们不需要查看 {} 之间的内容
对不起，我误会了你。这是 vendor.js 文件的链接：gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845 由于其他文件工作正常，错误必须在此文件中的某个位置。 Edit3...：我想强调一下，vendor.js 文件是一个生成的文件，它只包含 npm 库。
我意识到发生了什么。 vendor.js 中有 ")。我显然无法改变这一点。有没有办法将脚本标签保留在脚本标签内？

标签： javascript webpack vue.js

【解决方案1】：

我知道出了什么问题。

一些浏览器（我在 Mac 上测试过 Safari 和 Chrome）似乎不喜欢 <script> 标签，因为它们的某个地方有一个开始脚本标签。即使所有结束脚本标签都被转义（如document.write("</script"+">")）

奇怪的是，这在像这样的简单示例中确实有效：

<script>
    document.write("<script>alert(1)</script"+">")
</script>

在复杂的例子中（比如这个：https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845）它仅在所有<script> 标签都“转义”时才有效。也许有人可以找出简单示例和复杂示例之间的区别。

在我的例子中，我使用了 html-webpack-plugin 的内联示例，我对其进行了如下修改：

script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source().replace(/<script>/g,'<script"+">')}

注意最后的 replace() 调用。

【讨论】：

【解决方案2】：

您不需要包含 app.js 文件。如果您从项目文件夹运行npm run build，它将在dist 文件夹中创建运行应用程序所需的所有文件。

还请记住，该应用必须由 HTTP 服务器 提供服务才能运行。

【讨论】：

感谢您的回答，但我认为您忽略了我遇到的问题。我需要获取一个没有任何 js/css 文件的 html 文件，因此想要内联文件（手动或通过构建脚本 - 没关系）。这就是问题所在，因为内联时 js 文件不再起作用。