인라인 된 Webpack JS 파일이 작동하지 않습니다.

죽다

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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

플러그인이 React JS로 Webpack에서 작동하지 않습니다.

분류에서Dev

React js css 인라인 스타일 여백이 작동하지 않습니다.

분류에서Dev

파이프 라인에 할당 된 변수가 작동하지 않습니다.

분류에서Dev

인라인 JS setTimeOut이 firefox에서 작동하지 않습니다.

분류에서Dev

연결된 svg 애니메이션이 작동하지 않습니다. 인라인으로 잘 작동

분류에서Dev

webpack이있는 Vue.js는 압축 된 GZIP .js 파일을 제공하지 않습니다.

분류에서Dev

JS 인수 바인딩이 작동하지 않습니다.

분류에서Dev

Vue.js는 배열에서 대체 된 요소를 바인딩하지 않습니다. 스플 라이스와 함께 작동합니다 .... 왜?

분류에서Dev

인 텐트가 활성화 된 경우에도 guildMemberAdd 이벤트가 작동하지 않습니다. (discord.js)

분류에서Dev

Fiddler가 실행되지 않으면 NTLM 인증이 JS 파일에 대해 작동하지 않습니다.

분류에서Dev

Angular js 바인딩이 작동하지 않습니다.

분류에서Dev

Angular.JS 바인딩이 작동하지 않습니다.

분류에서Dev

Hapi.js 인증이 작동하지 않습니다.

분류에서Dev

Angular JS 확인란이 작동하지 않습니다.

분류에서Dev

파이프 라인 된 Sed는 Find "-exec"에서 호출 될 때 Bash 명령 대체 내에서 찾은 파일 이름에서 작동하지 않습니다.

분류에서Dev

Webpack이 작동하지 않습니다.

분류에서Dev

Webpack이 작동하지 않습니다.

분류에서Dev

배경 이미지는 CSS에서 작동하지만 Webpack 용 JS에서는 작동하지 않습니다.

분류에서Dev

첫 번째 js 파일에 정의 된 함수가 다른 js 파일에서 작동하지 않습니다.

분류에서Dev

.js 파일이 새로 렌더링 된 형식에서 작동하지 않습니다.

분류에서Dev

포함 된 js 파일이 jQuery .load () 콘텐츠에서 작동하지 않습니다.

분류에서Dev

JS의 라디오 버튼 확인이 작동하지 않습니까?

분류에서Dev

추출 된 파일이 인식되지 않습니다.

분류에서Dev

파일 인코딩이 작동하지 않습니다

분류에서Dev

인코딩 된 문자열이 신속하게 작동하지 않습니다.

분류에서Dev

노드 라이브러리 인형이 vue.js에서 작동하지 않습니다.

분류에서Dev

Vanilla js 페이드 인 애니메이션이 작동하지 않습니다.

분류에서Dev

Angular JS 라우팅이 작동하지 않습니다.

분류에서Dev

JS 슬라이더가 작동하지 않습니다.

Related 관련 기사

  1. 1

    플러그인이 React JS로 Webpack에서 작동하지 않습니다.

  2. 2

    React js css 인라인 스타일 여백이 작동하지 않습니다.

  3. 3

    파이프 라인에 할당 된 변수가 작동하지 않습니다.

  4. 4

    인라인 JS setTimeOut이 firefox에서 작동하지 않습니다.

  5. 5

    연결된 svg 애니메이션이 작동하지 않습니다. 인라인으로 잘 작동

  6. 6

    webpack이있는 Vue.js는 압축 된 GZIP .js 파일을 제공하지 않습니다.

  7. 7

    JS 인수 바인딩이 작동하지 않습니다.

  8. 8

    Vue.js는 배열에서 대체 된 요소를 바인딩하지 않습니다. 스플 라이스와 함께 작동합니다 .... 왜?

  9. 9

    인 텐트가 활성화 된 경우에도 guildMemberAdd 이벤트가 작동하지 않습니다. (discord.js)

  10. 10

    Fiddler가 실행되지 않으면 NTLM 인증이 JS 파일에 대해 작동하지 않습니다.

  11. 11

    Angular js 바인딩이 작동하지 않습니다.

  12. 12

    Angular.JS 바인딩이 작동하지 않습니다.

  13. 13

    Hapi.js 인증이 작동하지 않습니다.

  14. 14

    Angular JS 확인란이 작동하지 않습니다.

  15. 15

    파이프 라인 된 Sed는 Find "-exec"에서 호출 될 때 Bash 명령 대체 내에서 찾은 파일 이름에서 작동하지 않습니다.

  16. 16

    Webpack이 작동하지 않습니다.

  17. 17

    Webpack이 작동하지 않습니다.

  18. 18

    배경 이미지는 CSS에서 작동하지만 Webpack 용 JS에서는 작동하지 않습니다.

  19. 19

    첫 번째 js 파일에 정의 된 함수가 다른 js 파일에서 작동하지 않습니다.

  20. 20

    .js 파일이 새로 렌더링 된 형식에서 작동하지 않습니다.

  21. 21

    포함 된 js 파일이 jQuery .load () 콘텐츠에서 작동하지 않습니다.

  22. 22

    JS의 라디오 버튼 확인이 작동하지 않습니까?

  23. 23

    추출 된 파일이 인식되지 않습니다.

  24. 24

    파일 인코딩이 작동하지 않습니다

  25. 25

    인코딩 된 문자열이 신속하게 작동하지 않습니다.

  26. 26

    노드 라이브러리 인형이 vue.js에서 작동하지 않습니다.

  27. 27

    Vanilla js 페이드 인 애니메이션이 작동하지 않습니다.

  28. 28

    Angular JS 라우팅이 작동하지 않습니다.

  29. 29

    JS 슬라이더가 작동하지 않습니다.

뜨겁다태그

보관