index.html 파일과 응용 프로그램을 포함하는 javascript 파일을 생성하는 웹팩 프로젝트 ( https://github.com/vuejs/vue-webpack-example 기반 )가 있습니다.
다음과 같이 JavaScript를 포함하면 모든 것이 잘 작동합니다.
<script src="static/js/app.js"></script>
static / js / app.js의 내용을 스크립트 태그에 직접 포함하려고하면 (단일 .html 파일로 끝나야하기 때문에) 더 이상 작동하지 않습니다. 자바 스크립트가 전혀 제외되지 않은 것 같습니다.
<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가 어떻게 포함 되든 정확히 똑같이 동작 할 것이라고 생각했습니다.
나는 무엇이 잘못되었는지 알아 냈다.
일부 브라우저 (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 () 호출에 유의하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다