Question

我有一个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的行为完全相同，无论它包含在内。

Answer 1

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

请记住，必须先从 HTTP服务器提供该应用才能正常工作。

Answer 2

我弄清楚了什么是错的。

某些浏览器（我在Mac上测试了Safari和Chrome）似乎不喜欢<script>标签，这些标签内部有一个开放脚本标签。即使所有结束脚本标记都已转义（例如document.write("</script"+">")）

奇怪的是，这在以下简单示例中起作用：

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

在复杂的例子中（如下所示：https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845）它仅适用于所有<script>代码被＆＃34;转义＆＃34;。也许有人可以找出简单和复杂的例子之间的区别。

在我的情况下，我使用了html-webpack-plugin的内联示例，我修改如下：

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

注意最后的replace（）调用。

内联的Webpack JS文件不起作用

2 个答案: