의 웹 팩JSP 인덱스 파일

의 웹 팩JSP 인덱스 파일

현재 프런트엔드와 백엔드가 밀접하게 연결되어 있는 프로젝트를 진행하고 있습니다.애플리케이션의 레거시 버전은 를 사용하여 구축됩니다.JSP 파일, 인덱스 파일은 인덱스입니다.JSP 파일

현재 저의 업무는 Vue의 새로운 프런트엔드에 대한 개발 환경을 작성하고 Webpack dev 서버를 사용하여 새로운 정보를 제공하고 번들을 index.jsp 파일에 삽입하는 것입니다.이것이 제가 막히는 부분입니다.Webpack dev server나 HtmlWebpackPlugin 스크립트 태그를 JSP 파일에 삽입하는 방법을 모르겠습니다.

저는 정말 벽에 부딪혔기 때문에 어떤 도움이라도 주시면 감사하겠습니다.

JSP 등의 서버측 컴포넌트를 Web 팩과 함께 번들(또는 처리)하는 것은 좋지 않습니다.게다가 웹 팩과 로더/플러그인은 서버측 컴포넌트를 지원하지 않는다고 생각합니다.좋은 점은 그것이 필요하지 않고 타협점이 있다는 것이다.

즉, 웹 팩이 클라이언트 측 코드(JS, CSS, SCSS 등)의 전부 또는 일부를 번들하기 위해 설치되어 있는 것을 전제로 한 Web 팩과 함께 JSP를 사용하는 옵션입니다.

옵션 1: 웹 팩 번들을 maven/ant/gradle 빌드의 일부로 만듭니다.

• 웹 팩은 코드를 번들하여bundle.js
• 다음을 포함하도록 JSP 페이지를 업데이트하십시오.bundle.js경유로script태그
• Java 코드 빌드 단계 중 하나에 웹 팩 번들을 포함하도록 빌드(maven/ant/gradle 등)를 수정합니다.
• 앱/웹 서버에 코드 배포

제한적으로 말하자면, 클라이언트 측 코드 중 하나가 변경될 때마다 풀 Java 빌드(maven/ant/gradle 등)를 실행해야 한다는 점에서 이는 다소 제한적입니다.이것은 분명히 시간이 걸린다.

옵션 2: 번들에 대해 앱/웹 서버 설치 위치에 배포된 앱 폴더 사용

• 응용 프로그램/웹 서버 내에 웹 팩 출력 번들 파일이 있습니다(앱/웹 서버 환경에 따라 sudo 액세스 권한을 가진 웹 팩을 실행해야 할 수도 있습니다).사용할 수 있다--output-path웹 팩을 사용하여 그렇게 할 수 있습니다.
• watch 모드로 Web pack 실행(편리함, 속도 등에 따라 개발/실동 모드 선택 가능)

CLIENT 코드는 정상적으로 작업을 계속할 수 있습니다.기존의 메이븐/앤트/그레이드 빌드 및 도입을 사용할 필요가 없습니다.따라서 이 옵션은 Option1에 비해 우수합니다.

이것은 우리가 개발에 사용해 온 것으로, 좋은 것으로 판명되었다.

옵션 3: 어플리케이션/웹 서버에서 웹 팩 개발 서버 번들과 JSP를 모두 처리할 수 있는 Apache를 전면에 배치

JSP가 사진에 있는 한 webpack dev 서버를 사용할 수 없습니다.이유 : webpack dev 서버는 클라이언트 측 코드를 번들하지만 JSP는 앱/웹 서버에서 제공합니다.현재 해당 앱/웹 서버에는 귀/전쟁의 일부로 배포된 정적 파일만 있습니다.클라이언트 측 코드를 추적하고 변경이 있을 때마다 자동 번들에 대해 Webpack dev 서버에 대해 아무것도 알지 못합니다.

단, Apache Web 서버를 전면에 배치하여 앱 서버와 웹 팩 개발 서버 모두와 통신할 수 있습니다.이렇게 하면 변경 내용이 클라이언트 측 코드에만 있을 때 소스 코드를 빌드하지 않아도 됩니다.옵션2로 충분하기 때문에 아직 시도하지 않았습니다.

도움이 됐으면 좋겠다.

[Update] : 보다 효율적으로 동작하는 두 번째 옵션이 추가되었습니다.

JSP와 Webpack 4로 webpack devServer 문제를 해결할 수 있었습니다.개발에는 Intelij와 Tomcat을 사용합니다.개발 중에 js 번들은 포트 3000(tomcat은 8080)의 Webpack dev 서버에 의해 제공됩니다.번들에 대한 베이스 패스에 JSP var를 사용하여 dev와 prod를 쉽게 전환했습니다.

devServer의 webpack.dev.js 섹션은 다음과 같습니다.

 devServer: {
        contentBase: './webroot/dist',
        watchContentBase: true,
        port: 3000,
        publicPath: 'http://localhost:3000/bigtech/dist'
    }

번들의 실제 개발 경로(jsp 해결 후)는 다음과 같습니다.http://localhost:3000/bigtech/dist/index-bundle.js

jsp에서는 다음과 같습니다.

<script src="<%=baseJSBundleDir%>/dist/index-bundle.js" ></script>

베이스 J를 설정합니다.개발 모드 여부를 확인하는 Java 함수를 통해 SBundleDir(프로퍼티 파일로 설정)

webpack devServer 실행 후 js파일에 변경을 저장하면 브라우저가 즉시 갱신된 새로운 번들코드로 자동 새로고침 됩니다.좋아요!

제 경우 JPS는 JS앱용 컨테이너이기 때문에 개발 서버를 사용하는 것이 복잡합니다.

"watch"를 사용해 보십시오: "webpack --watch"

페이지를 수동으로 갱신해야 하지만 회피책으로는 충분합니다.

언급URL : https://stackoverflow.com/questions/47833812/webpack-with-jsp-index-file