內聯Webpack JS文件不起作用

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>標簽都被“轉義”時，它才有效。 也許有人可以找出簡單示例與復雜示例之間的區別。

就我而言，我使用html-webpack-plugin的內聯示例，對其進行了如下修改：

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

注意最后的replace（）調用。