다중 페이지 PHP 응용 프로그램에서 Webpack을 통합하는 방법

Javascript 코드베이스가 지저분하고 구조가 잘 못된 구식 Codeigniter 웹 사이트에서 작업하고 있습니다. 스크립트를 관리하기 위해 Webback을 사용하고 싶습니다. 내 목표는 내가 사용하는 코드를 번들로 사용하고 모듈과 가져 오기를 사용하도록 점차적으로 리팩터링하는 것입니다.다중 페이지 PHP 응용 프로그램에서 Webpack을 통합하는 방법

현재 Gulp를 사용하여 개발 중이지만 (주로 파일을 최소화하기 위해) Carabiner (Codeigniter 라이브러리)을 사용하여 뷰에 스크립트를 삽입합니다.

모든 IIFE로 작성된 스크립트는 번들로 제공되지 않으므로 모든 컨트롤러 기능에서 해당 페이지에 필요한 스크립트 배열이 있습니다. 예를 들어 : 내 스크립트 라이브러리에 대해 하나 하나를 :

public function homepage() 
{ 
    $this->carabiner->js([ 
     ['libraryThatIOnlyNeedHere.min.js'], 
     ['myscript1.js'], 
     ['myscript2.js'], 
     ['myscript3.js'], 
    ]);

나는 모든 페이지에 최대 두 개의 파일을로드 끝낼 수 있도록 번들의 시리즈를 만들 웹팩을 사용하고 싶습니다.

Webpack에서 보았던 모든 실용 사례는 단일 페이지 응용 프로그램을위한 것이므로 모든 항목을 함께 묶는 것이 매우 쉽습니다.

제 경우 가장 좋은 방법은 무엇입니까? 코드가 여전히 모듈과 가져 오기를 제대로 사용할 준비가되지 않았다는 것을 고려할 때 Webpack 구성 파일에 많은 진입 점을 만들어야합니다. 아마도 모든 페이지마다 하나씩 그리고 그 페이지에 필요한 모든 스크립트를 나열 할 수 있습니까?

출처

2017-11-03 Carlo

진짜 악몽이 될 각 페이지마다 다른 번들 쌍을 만들어야합니다. 첫 번째 단계로 대신 2 개의 번들을 만들어야합니다. 하나는 공용 라이브러리 용이고 1 개는 일반적인 스크립트 용입니다. 그런 다음 각 개별 페이지에서 추가 스크립트를로드 할 수 있습니다. 그렇지 않으면 유일한 방법은 각 경로에 대해 번들 쌍을 사용하는 것입니다. – apokryfos

많은 진입 점을 정의해야하기 때문에 진짜 악몽일까요? 그게 중요한 문제라면, 나는 그렇게하지 않을 것이다. 2 시간 정도 걸릴 것 같습니다. – Carlo

기본적으로 솔루션은 "scripts.bundle.homepage.min.js"및 "vendor.bundle.homepage.min.j"(이름은 어렵습니다)와 같은 것을 만들 것입니다. 이것은 JS가 필요한 각 페이지에 대한 것입니다. webpack으로 gulp를 수정하고 꿀풀 프로세스의 일부로 묶음을 만들 수 있습니다. 그런 다음 원시 스크립트 파일 대신 번들을 제공하기 위해 각 컨트롤러 경로를 수정해야합니다. – apokryfos

webpack의 기본 아이디어는 제공된 소스에서 모듈 그래프를 작성한 다음 번들로 결합하는 것입니다. 코드에 명시 적 종속성이없는 경우 사용 가능한 방법 (AMD, CommonJS 등)을 사용하여 모든 파일에서 모듈을 만드는 것으로부터 시작하는 것이 좋습니다. 모듈 식별자를 만들고 모든 모듈에 대한 종속성을 정의해야합니다. 예를 들어 this article을 읽는 것이 좋습니다.

중간 단계로 Require.JS과 같은 일부 로더를 사용하여 모듈화 된 코드를로드 할 수 있습니다.

이 단계가 완료 될 때까지 Webpack을 많이 사용하지 않습니다.

출처

2017-11-03 10:13:20 Flying

나는 이것을 알고있다. 그러나 나중에 그것을 버리기 위해 새로운 기술 (AMD, common 등)을 사용할 가치가 있는지 나는 모른다. 또한 모듈을 만들면 CommonJS라고 가정 해 봅시다. 모든 컨트롤러에 들어가서 내가 포함하는 JS 파일을 변경해야합니다. Webpack을 사용하여 명시 적 번들을 만들고 나중에 코드를 리팩터링하는 것이 좋지 않겠습니까? – Carlo

@Carlo webpack은 사용자가 제공 할 진입 점을 조사하여 다른 모듈에 대한 참조를 소스로 검색합니다.레거시 코드는 암시 적이기 때문에 분명히 그러한 참조가 없으므로 번들은 단일 모듈로 구성되어 꽤 쓸모가 없습니다. webpack에 사용 가능한 접근법 (AMD, CommonJS, 네이티브 JS 모듈 등)을 사용하여 모듈 그래프를 작성하는 방법을 웹팩에 제공해야합니다. 그러나 모든 모듈에 대한 명시 적 종속성을 구축하는 단계가 필요합니다. Webpack은 모듈 자체를 나중에 변환 할 것이므로 귀하의 대답과 정보에 대해 – Flying

에 대해 고맙게 생각하지 마십시오. 내가 제공 한 정보로 더 많은 조사를 해본 결과 점차 Webpack으로 전환하는 방법을 설명하는이 기사 (https://medium.com/eventmobi/how-to-incrementally-switch-to-webpack-203a1b431f7a)를 발견했습니다. 내 요구에 완벽하게 맞는 것 같습니다. – Carlo

다중 페이지 PHP 응용 프로그램에서 Webpack을 통합하는 방법

답변

관련 문제