インラインWebpack JSファイルが機能しない

Question

私はindex.htmlファイルとアプリケーションを含むjavascriptファイルを生成するwebpackプロジェクト（https://github.com/vuejs/vue-webpack-exampleに基づいています）を持っています。

私はこのようなJavaScriptを含めるとすべてが正常に動作します：私は、静的/ JSの内容を含めるしようとすると、我々はで終わる必要があるので、

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

/scriptタグ（直接app.js単一の.htmlファイル）、それはもはや動作しません。私はvendor.js 3つのファイル（manifest.js、vendor.jsとapp.js）にアプリケーションを抽出

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

は私がから必要なライブラリが含ま：JavaScriptは全くexectutedれないように見えますnode_modules。私がvendor.jsを直接インクルードしていない限り動作します。ですから、manifest.jsとapp.jsはインライン化できますが、vendor.jsはインライン化できません。

インラインjsが機能しないが、URLを介して組み込まれたjsが機能する理由はありますか？今まで私はjsがどのように含まれていてもまったく同じように動作すると思っていました。

Answer 1

私は何が間違っているのか分かりました。

一部のブラウザ（MacでSafariとChromeをテストしました）の中には、開かれたスクリプトタグが入っている<script>タグがないようです。すべて閉じるスクリプトタグがエスケープされていても（document.write("</script"+">")のような）

この1のような奇妙な、これは単純な例では、作業を行います。それはときにのみ機能します ：（https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845このような）複雑な例で

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

すべての<script>タグは「エスケープ」されます。たぶん誰かが、単純な例と複雑な例の違いを知ることができます。終わりに

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

注置き換える（）呼び出し：

は私の場合、私は次のように変更html-webpack-pluginのインライン例を用います。

Answer 2

app.jsファイルを含める必要はありません。プロジェクトフォルダからnpm run buildを実行すると、distフォルダ内でアプリケーションを実行するために必要なすべてのファイルが作成されます。

また、アプリケーションはHTTPサーバーからサービスを提供する必要があります。