로딩 과 번들링 모듈 간의 몇 가지 주요 차이점을 확인하는 것이 중요합니다. JSPM의 내부에 있는 [SystemJS와] (https://github.com/systemjs/systemjs) 같은 도구를 사용하여 브라우저에서 런타임에 모듈을 로드하고 트랜스파일 합니다. 이는 모듈이 트랜스파일되고 ("로더"를 통해) 브라우저에 도달하기 전에 번들로 제공되는 webpack과는 상당히 다릅니다.
각 방법에는 장단점이 있습니다. 런타임에 모듈을 로드하고 트랜스파일하면 많은 모듈로 구성된 대규모 사이트와 애플리케이션에 많은 오버헤드를 추가할 수 있습니다. 이러한 이유로 SystemJS는 필요한 모듈이 적은 소규모 프로젝트에 더 적합합니다. 그러나 HTTP/2가 서버에서 클라이언트로 파일을 전송할 수 있는 속도를 향상시키기 때문에 다소 변경될 수 있습니다. HTTP/2는 트랜스파일 모듈에 대한 어떤 것도 변경하지 않으며, 클라이언트에서 수행할 때 항상 시간이 더 오래 걸립니다.
Awesome webpack
A curated list of awesome webpack resources, libraries, tools and applications. It is inspired by the awesome list. Feel free to improve this list by contributing.
Generate package.json Plugin - Limit dependencies in a deployment package.json to only those that are actually being used by your bundle. -- Maintainer: Paul Myburgh
build-hash-webpack-plugin For each build, Webpack generates an in-memory hash allowing to know if two build outputs are the same or not. This plugin writes the described build hash in a separate json file. -- Maintainer: Réda Housni Alaoui
webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon
Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- MaintainerLilian Saget-Lethias
Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- MaintainerLilian Saget-Lethias
webpack-typescript-directory-compile-plugin Configure an source directory of typescript files and an output directory for JavaScript files. Each typescript file in the source directory and any newly added files will be compiled to individual JavaScript files. -- Maintainer: Stephen Sigwart
CycloneDX Webpack Plugin: Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- Maintainer: OWASP CycloneDX Team
Transpile Webpack Plugin: Transpiles input files into output files individually without bundling together. -- Maintainer: Chungen Li
Manifest Extraction Plugin: Generates an asset manifest after compiling webpack. -- Maintainer: Andrew Powell
Webpack Tools
Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team
Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team
Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen
NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons
Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team
Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds
Read - A highly scalable react boilerplate from logustra
@route-resource-preload/webpack-plugin - Focus on improving the first screen loading speed of applications and providing the best user experience, inspiration comes from the preloading of NextJS from Devin Deng.
Vue
Vuad - A highly scalable vue boilerplate from logustra
로고와 브랜드 이름은 MIT 라이선스가 아닙니다. 사용지침은 우리의 라이선스를 확인하세요.
Glossary
이 색인은 webpack 생태계 전체에서 사용되는 일반적인 용어를 나열합니다.
A
Asset(애셋): 일반적으로 웹사이트 및 기타 응용프로그램에서 사용되는 이미지, 폰트, 미디어 및 기타 모든 종류의 파일을 말합니다. 이러한 파일은 output 내에서 개별 파일로 처리되지만 style-loader 또는 url-loader과 같은 파일을 통해 인라인화 할 수도 있습니다.
B
Bundle(번들): 여러 개별 모듈에서 생성된 번들에는 이미 로드와 컴파일 프로세스를 거친 소스 파일의 최종 버전이 포함되어 있습니다.
Bundle Splitting(번들 분할): 이 프로세스는 빌드를 최적화하는 한 가지 방법을 제공하여 webpack이 단일 애플리케이션에 대해 여러 번들을 생성할 수 있게 합니다. 결과적으로 각 번들은 다른 번들에 영향을 주는 변경 사항으로부터 격리 될 수 있으므로 다시 게시해야 하는 코드의 양과 클라이언트에서 브라우저 캐싱의 장점을 활용하여 다시 다운로드 해야 하는 코드의 양을 줄일 수 있습니다.
C
Chunk(청크) : webpack의 특정 용어는 번들링 프로세스를 관리하기 위해 내부적으로 사용됩니다. 번들은 여러 유형(예: 항목 및 하위)이 있는 청크로 구성됩니다. 일반적으로, 청크는 출력 번들과 직접적으로 일치하지만 일대일 관계를 생성하지 않는 일부 설정이 있습니다.
Code Splitting(코드 스플리팅): 모든 것을 포함하는 단일 번들을 로드하는 대신 요청시 로드 할 수있는 다양한 번들/청크하여 코드를 분할하는 것을 말합니다.
Configuration(설정): webpack 설정 파일은 객체를 내보내는 오래된 일반 JavaScript 파일입니다. 이 객체는 정의 된 속성을 기반으로 webpack에 의해 처리됩니다.
D
Dependency Graph(디펜던시 그래프): 하나의 파일이 다른 파일에 의존 할 때마다 webpack은 의존성으로 취급합니다. 엔트리 포인트에서 시작하여 webpack은 애플리케이션에 필요한 모든 모듈/애셋을 포함하는 디펜던시 그래프를 재귀적으로 작성합니다.
E
Entry Point(엔트리 포인트): 엔트리 포인트는 시작할 위치를 webpack에 알려주고 번들 항목을 알기 위해 디펜던시 그래프를 따릅니다. 애플리케이션의 엔트리 포인트를 번들로 묶으려는 문맥적인 루트로 생각할 수 있습니다.
Plugin(플러그인): apply 속성을 갖고 있는 JavaScript 객체. 이 apply 속성은 webpack 컴파일러에 의해 호출되어 전체 컴파일 수명주기에 대한 엑세스를 제공합니다. 이러한 패키지는 일반적으로 한가지 혹은 다른 방식으로 컴파일 기능을 확장합니다.
R
Request(요청): require/import 구문의 표현식을 참조하면, 예를들어 require("./template/" + name + ".ejs") 요청은 "./template/" + name + ".ejs" 구문이 됩니다.
S
Scaffolding: 이 기능을 사용하면 사용자 지정 가능한 타사 초기화 패키지를 사용하여 webpack 설정을 만들 수 있습니다.
Shimming: 모든 JS 파일을 webpack에서 직접 사용할 수 있는 것은 아닙니다. 파일이 지원되지 않는 모듈 형식이거나 모듈 형식이 아닐 수도 있습니다. 이럴때 shimming이 사용됩니다.
T
Target(대상): 브라우저, NodeJS, Electron과 같은 특정 환경에 맞게 컴파일하기 위해 사용자가 설정한 배포 대상이 여기에 나열 되어 있습니다.
Tree Shaking(트리 쉐이킹): 미사용 및 초과 코드 제거 또는 보다 정확하게 라이브 코드 가져오기. webpack과 같은 컴파일러는 다양한 종류의 import문과 가져온 코드의 사용을 분석하여 실제로 활용되고 있는 의존성 부분을 결정하고 그렇지 않은 "트리" 부분을 삭제함으로써 이를 수행합니다.
V
Vendor Entry Point(Vendor 엔트리 포인트): app.js 와 vendors.js 모두에서 시작하는 디펜던시 그래프를 만듭니다. 이러한 그래프는 CommonsChunkPlugin을 활용할 수 있도록 서로 완전히 분리되고 독립적이며, 앱 번들에서 벤더 참조사항을 추출하여 벤더 번들로 가져옵니다. 장기 벤더 캐싱(vendor-caching)으로 알려진 webpack의 공통 모듈 패턴을 달성하도록 지원합니다.
W
webpack: 모던 JavaScript 애플리케이션을 위한 고도로 설정 가능한 모듈 번들러.