webpack 예제

코드 분할 예제는 매우 간단한 코드 분할 사례를 보여 주며, 이 웹팩을 해결하기 위해 웹팩-개발-서버가 있습니다. 그래서 우리의 개발 서버를 설정하자. 알지 못하면 이미 이전 예제에서 « 모드 »가있는 많은 기본 웹 팩 플러그인을 사용했으며 JavaScript가 축소되었으며 소스 맵이 생성되지 않았습니다. 따라서 디버깅 도구(예: Chrome 개발자 도구)를 사용하면 원래 소스 코드에 액세스할 수 없습니다(디버깅이 사실상 불가능합니다). 경우에 따라 자산을 가져오기 위해 HTTP 요청을 하지 않으려는 경우가 있습니다. 예를 들어, 인코딩된 이미지(base64)에 직접 액세스할 수 있을 때 작은 이미지를 가져오기 위해 HTTP 요청을 하는 요점은 무엇입니까? URL 로더는 그렇게합니다. 당신이해야 할 일은 파일의 인코딩 된 버전을 원하는 한계 (바이트)를 결정하는 것입니다 (파일이 더 큰 경우 경로가 됩니다). 자바스크립트가 진입점이지만, 웹팩은 HTML, CSS 및 SVG와 같은 다른 자산 유형에는 각각 자체 종속성이 있으며 빌드 프로세스의 일부로 간주되어야 합니다. 각 예제에 대해 첫 번째 단계는 새 폴더(예당 하나)를 만들고 명령줄에서 npm 초기화를 실행하여 프로젝트를 초기화하는 것입니다(package.json 파일 만들기). 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것입니다. 커피 스크립트로 작성된 코드를 시연하는 커피 스크립트 예제입니다. 혼합 예제 혼합 시연 혼합 CommonJs 및 AMD 우리는 우리가 우리의 config 파일에 선언 한 제목을 추가htmlWebpackPlugin.options.title을 사용하고 있습니다.

또한 index.jsfile에 로그를 넣으면 다음 예제를 통과하려면 컴퓨터에 노드와 Npm을 설치해야합니다. 웹 팩 4 기본적으로 0 구성 (우리는 우리가 프로젝트로 시작할 때 그것에 대해 볼 것 이다). 0 구성이 있다고 해서 Webpack에서 아무 것도 구성할 수 없다는 의미는 아닙니다. 필요에 맞게 고도로 구성할 수 있습니다. 이렇게 하면 웹팩에서 진입점 src/index.js에서 코드를 컴파일하고 /dist/bundle.js에서 번들을 출력할 수 있습니다. 웹팩을 실행하기 위한 npm 스크립트를 추가해 보겠습니다. 며칠 전, 나는 어딘가에 호스팅 할 수있는 간단한 SCSS및 ES6와 정적 웹 사이트를 구축하고 싶었다. 그래서 SCSS를 CSS 및 ES6+ 코드로 ES5로 변환 할 수있는 간단한 프로젝트를 설정하기로 결정했습니다.

나는 웹 팩 4를 사용하기로 결정했다. 이 문서는 이 학습을 기반으로 합니다. 이 문서의 코드 베이스는 내 Github에서 찾을 수 있습니다. 코드 분할-번들-로더 예제 빌더 로더 참고를 통해 코드 분할을 보여 줍니다: /* webpackChunkName */ 번들 이름을 주는 것에 대 한 의견에도 불구 하 고, 이 구문은 웹 팩 특정. 브라우저에서 직접 지원하도록 의도된 동적 가져오기에 대해 제안된 구문입니다. 이 문서는 Webpack을 처음 사용하는 사람들을 대상으로 하며 초기 설정 및 구성, 모듈, 로더, 플러그인, 코드 분할 및 핫 모듈 교체를 다룹니다. 당신이 도움이 비디오 자습서를 찾을 경우, 나는 매우 웹 팩을 특별하게 만드는 것이 무엇인지 이해하는 출발점으로 첫 번째 원칙에서 글렌 매더른의 웹 팩을 추천 할 수 있습니다. 지금은 조금 오래되었지만 원칙은 여전히 동일하며 훌륭한 소개입니다. ExtractTextWebpackPlugin을 사용하여 생산을 위해 번들링 할 때 자바 스크립트에서 CSS를 분할하는 것이 좋습니다. 코드 분할-요구.컨텍스트-amd 예제는 AMD와 코드 분할 환경에서 컨텍스트를 보여 주는.

마지막으로 살펴볼 로더의 예는 파일 로더를 통해 이미지를 처리하는 것입니다. 코드 분할을 통해 여러 진입점을 보여 주는 다중 진입점 예제입니다.