Datagrid and Charting for Enterprise Applications
webpack
Proud to partner with webpack

Printable

webpack

Install Webpack

npm install --save-dev webpack webpack-cli

코드를 작성해 보세요

src/index.js

import bar from "./bar.js";

bar();

src/bar.js

export default function bar() {
  //
}

번들해 보세요

설정 파일 없이 시작하거나 사용자 지정 webpack.config.js 파일을 제공하세요.

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

Prefer a video walkthrough? Without config

page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    ...
  </head>
  <body>
    ...
    <script src="dist/bundle.js"></script>
  </body>
</html>

그다음 커멘드 라인에서 webpack 명령어를 실행해 bundle.js를 생성하세요.

멋지지 않나요? 좀 더 알아보세요!

가이드를 따라 빠르게 시작해 보거나, Concepts에서 webpack의 핵심 개념을 자세히 알아보세요.

한글화 작업에 참여하려면 어떻게 해야합니까?

한국어 번역 저장소에 자유롭게 이슈를 올려주시고, 기여 방법을 참고하여 PR 보내주시면 적극 반영하겠습니다!

Comparison

Webpack은 유일한 모듈 번들러가 아닙니다. Webpack 또는 아래 번들러 중 하나를 사용하는 경우, webpack이 현재 경쟁 제품과 어떻게 비교되는지에 대한 기능별 비교가 아래에 있습니다.

기능webpack/webpackjrburke/requirejssubstack/node-browserifyjspm/jspm-clirollup/rollupbrunch/brunch
요구에 따른 추가 청크 로드예예아니오System.import아니오아니오
AMD define예예deamdify예rollup-plugin-amd예
AMD require예예아니오예아니오예
AMD require loads on demand예수동 설정으로아니오예아니오아니오
CommonJS exports예define으로 감싼것만예예commonjs-plugin예
CommonJS require예define으로 감싼것만예예commonjs-plugin예
CommonJS require.resolve예아니오아니오아니오아니오-
require에서의 연결 require("./fi" + "le")예아니오♦아니오아니오아니오-
디버깅 지원소스Url(SourceUrl), 소스맵(SourceMaps)불필요소스맵(SourceMaps)소스Url(SourceUrl), 소스맵(SourceMaps)소스Url(SourceUrl), 소스맵(SourceMaps)소스맵(SourceMaps)
의존성19MB / 127 패키지11MB / 118 패키지1.2MB / 1 패키지26MB / 131 패키지?MB / 3 패키지-
ES2015 import/export예 (webpack 2)아니오아니오예예예, es6 모듈 트랜스파일러를 통해
require에서의 표현식 (가이드된) require("./templates/" + template)예 (모든 파일 매칭 포함)아니오♦아니오아니오아니오아니오
require에서의 표현식 (자율) require(moduleName)수동 설정으로아니오♦아니오아니오아니오-
단일 번들 생성예예♦예예예예
간접 require 구문 var r = require; r("./file")예아니오♦아니오아니오아니오-
각 파일을 별도로 로드아니오예아니오예아니오아니오
경로 이름 변경예아니오부분적으로예불필요 (경로이름이 번들에 포함되지 않음)아니오
최소화Terseruglify, 클로저 컴파일러uglifyify예uglify-pluginUglifyJS-brunch
공통 번들로 구성된 다중 페이지 작성수동 설정으로예수동 설정으로번들 계산으로아니오아니오
여러 개의 번들예수동 설정으로수동 설정으로예아니오예
Node.js 내장 라이브러리 require("path")예아니오예예node-resolve-plugin-
그밖에 Node.js 관련process, __dir/filename, global-process, __dir/filename, globalprocess, __dir/filename, global for cjsglobal (commonjs-plugin)-
플러그인예예예예예예
전처리로더로더변환플러그인 번역플러그인 번환컴파일러, 최적화 도구
브라우저 대체web_modules, .web.js, package.json 필드, 별칭 설정 옵션별칭 옵션package.json 필드, 별칭 옵션package.json, 별칭 옵션아니오-
필수 파일파일 시스템웹파일 시스템플러그인을 통해파일 시스템이나 플러그인을 통해파일 시스템
런타임 오버헤드243B + 20B per module + 4B per dependency14.7kB + 0B 모듈별로 + (3B + X) 의존성별로415B + 25B 모듈별로 + (6B + 2X) 의존성별로5.5kB 자체 실행 번들을 위해, 38kB 전체 로더와 폴리필을 위해, 0 일반 모듈, 293B CJS, 139B ES2015 System.register gzip실행전ES2015 모듈이 없음 (다른 포멧이 있을 수 있음)-
Watch 모드예불필요watchify개발환경에서 필요없음rollup-watch예

♦ 프로덕션 모드에서 (개발 모드와 반대)

X는 경로 문자열의 길이 입니다

Bundling vs. Loading

로딩 과 번들링 모듈 간의 몇 가지 주요 차이점을 확인하는 것이 중요합니다. 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.

Webpack Ecosystem

Support Webpack

Community

Twitter

People passionate about Webpack (In no particular order)

Libraries

Loaders

File Type

  • HTML Loader: HTML loader module for Webpack. -- Maintainer: Webpack Team Github
  • Responsive Loader: Loader for responsive images. -- Maintainer: Jeremy Stucki Github
  • SVG Url Loader: Loader which loads SVG file as utf-8 encoded Url. -- Maintainer: Hovhannes Babayan Github
  • mermaid Loader: mermaid loader module (diagrams) for Webpack. -- Maintainer: Paul Musso Github
  • wasm loader: wasm binary loader module for Webpack. -- Maintainer: Arthur Buldauskas Github
  • Imagemin Loader/Plugin: Image minimizing loader + plugin for webpack. -- Maintainer: itgalaxy inc. Github
  • Bin Exec Loader: Pipe any file through any binary. -- Maintainer: Rafael Milewski Github
  • GraphQL Loader: .graphql document loader. -- Maintainer: Stephen Wan Github

Component & Template

  • Angular2 Template Loader: Inlines html and style's in Angular2 components. -- Maintainer: Sean Larkin Github Twitter
  • Handlebars Loader: A handlebars template loader for Webpack. -- Maintainer: Paul Carduner Github Twitter
  • Vue Loader: Webpack loader for Vue.js components. -- Maintainer: Vuejs Team Github Twitter
  • SVG React Loader - Webpack SVG to React Component Loader. -- Maintainer: Jerry Hamlet Github Twitter
  • Underscore Loader - Underscore and Lodash template loader. -- Maintainer: Emmanuel Antico Github Twitter
  • ngTemplate Loader - Angular1 Template Loader. -- Maintainer: Toby Rahilly Github
  • ngInlineStylesLoader: Optimizes inlined css of angular components. -- Maintainer: Severin Friede Github
  • Markup-inline Loader Inline SVGs to HTML -- Maintainer: Zhicheng Wang Github
  • Polymer Loader - Loader for Polymer elements. -- Maintainers: Rob Dodson Github - Chad Killingsworth Github - Bryan Coulter Github
  • Tag Loader - Loader for Riot tag files. -- Maintainer: Riot Team Github Twitter
  • Twig Loader - Twig template loader. -- Maintainer: Zimmo.be Team Github
  • Auto ngTemplate Loader: Autodetect Angular 1 templates and load them. -- Maintainer: Yash Kulshrestha Github
  • Pug Loader - Pug template loader (formerly Jade). -- Maintainer: Pug Team Github
  • Simple Nunjucks Loader - Nunjucks template loader. -- Maintainer: ogonkov Github
  • PWA Manifest Loader - PWA manifest loader. -- Maintainer: autopulated Github

Styles

  • Style Loader: Style loader module for Webpack. -- Maintainer: Webpack Team Github
  • PostCSS Loader: PostCSS loader for Webpack. -- Maintainer: PostCSS Team Github Twitter
  • CSS Loader: CSS loader module for Webpack. -- Maintainer: Webpack Team Github
  • SASS Loader: SASS loader for Webpack. -- Maintainer: Jorik Tangelder Github Twitter
  • Less Loader: Less loader module for Webpack. -- Maintainer: Webpack Team Github
  • Stylus Loader: A stylus loader for webpack. -- Maintainer: Kyle Robinson Young Github Twitter
  • Isomorphic Style Loader: Isomorphic CSS style loader for Webpack. -- Maintainer: Kriasoft Team Github Twitter
  • Minify CSS-in-JS Loader: RegExp-based minify CSS-in-JS loader for Webpack, don't need babel. -- Maintainer: Zack Young Github Twitter
  • SASS Resources Loader: Globally import SASS resources (variables, mixins, etc.). -- Maintainer: ShakaCode Github Twitter

Language & Framework

  • TS Loader: TypeScript loader for webpack. -- Maintainer: TypeStrong Team Github
  • Coffee Loader: Coffee loader module for Webpack. -- Maintainer: Webpack Team Github
  • Bootstrap Loader: Load Bootstrap styles in your Webpack bundle. -- Maintainer: ShakaCode Team Github Twitter
  • PostHTML Loader: PostHTML loader for Webpack. -- Maintainer: PostHTML Team Github Twitter
  • ELM Loader: Webpack loader for the Elm programming language. -- Maintainer: Richard Feldman Github Twitter
  • Fengari Loader: Run Lua code using Fengari. -- Maintainer: Daurnimator Github Twitter

Utility

  • Babel Loader: Webpack plugin for Babel. -- Maintainer: Babel Team Github Twitter
  • Worker Loader: Worker loader module for Webpack. -- Maintainer: Webpack Team Github
  • Resolve URL Loader: Resolves relative paths in url() statements. -- Maintainer: Ben Holloway Github
  • Import Loader: Imports loader module for Webpack. -- Maintainer: Webpack Team Github
  • Combine Loader - Converts a loaders array into a single loader string. -- Maintainer: James Friend Github
  • Icon Font Loader - Converts svgs into font icons in CSS. -- Maintainer: Forrest R. Zhao Github
  • Icons Loader - Generates an iconfont from SVG dependencies. -- Maintainer: Mike Vercoelen Github
  • Modernizr Loader - Get your modernizr build bundled with webpack. -- Maintainer: Peerigon Devs Github
  • ngRouter Loader - AOT capable NgModule lazy loading using angular router -- Maintainer: Shlomi Assaf Github Twitter
  • Lingui Loader - Compile message catalogs on the fly for jsLingui, i18n library -- Maintainer: Tomáš Ehrlich Github Twitter
  • Shell Loader - Run an arbitrary shell script on source files. -- Maintainer: Jo Sprague Github
  • EXIF Loader - Extract EXIF- & IPTC-data from your JPGs during build-time. -- Maintainer: Emanuel Kluge Github Twitter
  • esbuild Loader - Blazing fast alternative to babel-loader, ts-loader, and Terser powered by esbuild. -- Maintainer: Hiroki Osame Github Twitter

Testing

Integration Libraries

  • Dotenv Webpack: Compiles environment variables into your bundle via dotenv. -- Maintainer: Matthew Steele Github Twitter
  • Terse Webpack - Webpack simplified in a fluent API with presets. -- Maintainer: Eric Clemmons Github Twitter
  • SystemJS Webpack - Webpack bundling for SystemJS. -- Maintainer: Guy Bedford Github Twitter
  • Gulp Webpack Stream - Run webpack through a stream interface. -- Maintainer: Kyle Robinson Young Github Twitter
  • Webpack Blocks - Configure webpack using functional feature blocks. -- Maintainer: Andy Wermke Github Twitter
  • Webpacker - Official webpack gem for integration into ruby on rails projects. -- Maintainer: Rails Github
  • WebpackAspnetMiddleware - Development middleware for ASP.NET 5. -- Maintainer: Frank Wallis Github
  • Consul Key/Value Webpack: Compiles environment variables into your bundle via Consul KV-store. -- Maintainer: Marlon Maxwel Github

Webpack Plugins

  • DefinePlugin: Create global constants which can be configured at compile time. -- Maintainer: Webpack Team Github
  • Compression Plugin: Prepare assets to serve with Content-Encoding. -- Maintainer: Webpack Team Github
  • Offline Plugin: Offline plugin (ServiceWorker, AppCache) for Webpack. -- Maintainer: Arthur Stolyar Github Twitter
  • Rewire Plugin: Dependency injection for Webpack bundles. -- Maintainer: Johannes Ewald Github Twitter
  • HTML Webpack Plugin: Simplifies creation of HTML files. -- Maintainer: Jan Nicklas Github Twitter
  • Copy Webpack Plugin: Copy files and directories in webpack. -- Maintainer: Len Boyette Github Twitter
  • Split By Path: Split By Path Webpack Plugin. -- Maintainer: Bohdan Tkachenko Github Twitter
  • SW Precache - Generates a service worker to precache bundle. -- Maintainer: Will Farley Github
  • CoreJS Plugin - Core-JS as a webpack plugin. -- Maintainer: PatrickJS Github
  • Bundle Analyzer - Utility that represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github
  • Module Mapping - Maps modules onto different files. -- Maintainer: Spartez Team Github Twitter
  • Serverless Webpack - Serverless plugin to bundle your lambdas. -- Maintainer: Elastic Coders Github Twitter
  • Prerender SPA - Framework-agnostic static site generation for SPAs. -- Maintainer: Chris Fritz Github Twitter
  • Static Site Generator Plugin - Minimal, unopinionated static site generator. -- Maintainer: Mark Dalgleish Github
  • SVG Sprite Plugin - Plugin for SVG sprites and icons. -- Maintainer: Jeremy Tice (TodayTix) Github Twitter
  • Imagemin Webpack Plugin - Minify images with Imagemin. -- Maintainer: Gregory Benner Github Twitter
  • Prepack Webpack Plugin - A webpack plugin for prepack. -- Maintainer: Gajus Kuizinas Github
  • Modules CDN Webpack Plugin - Dynamically load your modules from a CDN. -- Maintainer: Thomas Sileghem Github
  • 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 Github
  • Progressive Web App Manifest - PWA manifest manager and generator. -- Maintainer: Arthur A. Bergamaschi Github
  • FileManager Webpack Plugin - Copy, move, delete files and directories before and after Webpack builds -- Maintainer: Gregory Nowakowski Github
  • Fork TS Checker Webpack Plugin - Webpack plugin that runs typescript type checker on a separate process. -- Maintainer: TypeStrong Team Github
  • Duplicate Package Checker Webpack Plugin - Warns you when multiple versions of the same package exist in your bundle -- Maintainer: Darren Scerri Github
  • Circular Dependency Plugin - Detect modules with circular dependencies when bundling -- Maintainer: Aaron Ackerman Github
  • webpack-inject-plugin - A webpack plugin to dynamically inject code into the bundle. -- Maintainer: Adam Dierkens Github
  • Public Path Manipulation Plugin - control publicPath of dynamically loaded resources at runtime -- Maintainer: Andrew Goldis Github
  • Build Notifier Plugin - Display OS-level notifications for build errors and warnings. -- Maintainer: Rocco Cataldo Github
  • CSS Cleanup Webpack Plugin - A plugin to remove duplicated and unused css rules -- Maintainer: Dominik Weber Github
  • Extension Reloader - Hot reloading while developing browser extensions -- Maintainer: Rubens P. G. Cavalcante Github Twitter
  • Htmls Webpack Plugin: Simple and fast multiple-htmls-generating plugin for webpack. -- Maintainer: Zack Young Github Twitter
  • Mini css extract plugin: Lightweight CSS extraction plugin -- Maintainer: Webpack Contrib Github
  • 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 Github Twitter
  • webpack-hook-plugin - run any shell commands before or after webpack builds -- Maintainer: David Kwon Github
  • Dynamic Vendor Webpack Plugin - Gives you a way to import vendors with dynamic variable and specific code splitting. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Define Variable Webpack Plugin - Enhancement of DefinePlugin to store defined things in actual variables. -- Maintainer Lilian Saget-Lethias Github Twitter
  • Shell Script Webpack Plugin - A plugin for running arbitrary shell scripts when compiler hooks are triggered. -- Maintainer Drew Loomer Github Twitter
  • Stylelint Webpack Plugin: A Stylelint plugin for webpack. -- Maintainer: Ricardo Gobbo de Souza Github
  • ESLint Webpack Plugin: A ESLint plugin for webpack . -- Maintainer: Ricardo Gobbo de Souza Github
  • Exclude Assets Webpack Plugin: A plugin to exclude assets from webpack output based on a path RegExp pattern. -- Maintainer: Klayton Faria Github
  • Webpack Shell Plugin Next: A plugin allows you to run any shell commands before or after webpack builds. -- Maintainer: Kuzmin Pavel Github
  • Gettext Webpack Plugin: Embed localization into your bundle using gettext. -- Maintainer: Juan Luis Paz Github
  • Node Polyfill Plugin: Polyfill Node.js core modules. -- Maintainer: Richie Bendall Github Twitter
  • Bytenode Plugin: Compile JavaScript into bytecode using bytenode. -- Maintainer: Herbert Treis Neto Github
  • Chrome Extension Archive Webpack Plugin Create archive file to publish Chrome Exentions to Chrome Web Store -- Maintainer: KeisukeYamashita Github
  • Layer-pack Webpack Plugin Allow to glob imports file & directories, build mono repo apps via inheritable source code / npm packages & share webpack configs -- Maintainer: Braun Nathanaël Github
  • 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 Github
  • CycloneDX Webpack Plugin: Create CycloneDX Software Bill of Materials (SBOM) from webpack bundles at compile time. -- Maintainer: OWASP CycloneDX Team Github
  • Transpile Webpack Plugin: Transpiles input files into output files individually without bundling together. -- Maintainer: Chungen Li Github Twitter
  • Manifest Extraction Plugin: Generates an asset manifest after compiling webpack. -- Maintainer: Andrew Powell Github
  • Transform Async Modules Plugin: A Webpack plugin to transpile async module output using Babel. Allows transpiling top level await to ES5. -- Maintainer: Steve Repsher Github
  • CSS Layering Plugin: Wrap CSS in cascade layers. -- Maintainer: Kresimir Buric Github

Webpack Tools

  • Webpack Dev Middleware: Middleware which arguments a live bundle. -- Maintainer: Webpack Team Github
  • Webpack Dev Server: Serves a webpack app. Updates the browser on changes. -- Maintainer: Webpack Team Github
  • Webpack Merge - Merge designed for Webpack. -- Maintainer: Juho Vepsäläinen Github Twitter
  • NPM Install Webpack - Automatically install & save deps with Webpack. -- Maintainer: Eric Clemmons Github Twitter
  • Webpack Validator - Validates your webpack config with Joi. -- Maintainer: js-dxtools Team Github
  • Webpack Config Utils - Util. to make your webpack config easier to read. -- Maintainer: Kent C. Dodds Github Twitter
  • Angular2 Webpack Toolkit - Webpack tools and helpers for Angular 2. -- Maintainer: AngularClass Github Twitter
  • Webpack Bundle Analyzer - Represents bundles as an interactive treemap. -- Maintainer: Yuriy Grunin Github Twitter
  • HJS Webpack: Helpers/presets for setting up webpack with hotloading. -- Maintainer: Henrik Joreteg Github
  • Webpack Dashboard: A CLI dashboard for webpack dev server. -- Maintainer: Formidable Labs Github
  • Neutrino: Combines the power of Webpack with the simplicity of presets. -- Maintainer: Eli Perelman Github
  • Speed Measure Plugin - Measures the speed of your webpack plugins and loaders. -- Maintainer: Stephen Cook Github
  • Time Analytics Plugin - Analytics the time cost of loaders and plugins in webpack. Successor of Speed Measure Plugin -- Maintainer: Song Gao Github
  • packtracker.io - Webpack bundle analysis on every commit, report webpack stats to every pull request.
  • BundleStats: Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds. -- Maintainer: Vio Github Twitter
  • Webpack Landing Generator: Easy way to create landing page that converts. -- Maintainer: Aliaksei Kuncevic Github Twitter
  • Webpack Dev Server Firewall: Prevents access to dev server from unknown IPs. -- Maintainer: Igor Adamenko Github Twitter
  • RelativeCI: Run in-depth bundle analyses on every build and monitor webpack bundle size, assets, modules, and packages. Github

Research & Training

Articles

Videos

Courses

Books

  • SurviveJS - Webpack: Free book guiding from a webpack apprentice to master. Covers dev, prod, and advanced topics.

Webpack Examples

Community Examples

Angular

Framework Agnostic

React

Vue

Other

Branding Guidelines

여기에서 webpack 프로젝트 브랜드 지침, 자산 및 라이선스를 찾을 수 있습니다. 더 자세한 내용과 이 작업에 적용되는 라이선스를 참조하려면, 공식 미디어 저장소를 확인하세요. 이미지를 다운로드하려면 이미지를 클릭하세요.

The Name

webpack은 문장의 시작에서는 대문자 W를 사용할 수 있으나 그 외의 모든 경우에는 소문자로 작성합니다.

Logo

webpack 로고는 다음과 같이 주위에 충분한 공간이 있는 흰색 배경에 배치되어야 합니다.

webpack logo default with proper spacing on light background

svg | png | jpg

안쪽의 짙은 파란색 큐브 크기를 두배로 늘리면 로고의 공간이 어느 정도인지 알 수 있습니다.

어두운 배경의 경우, 색상 반전 버전의 로고를 사용할 수 있습니다.

webpack logo default with proper spacing on light background

svg | png | jpg

Icon only

아이콘은 레이아웃이 제한된 영역에서 사용하도록 설계되었습니다. 앞서 설명한대로 icon + text 사용을 권장합니다.

icon example

svg | png | jpg

더 큰 영역(예: 아바타 또는 프로필 사진)을 위한 정사각형 크기의 아이콘:

icon square big example

svg | png | jpg

작은 영역을 위한 정사각형 크기의 아이콘(예:파비콘):

icon square small example

svg | png | jpg

icon square small example

Color Palette

다음 색상은 사이트 전체에서 다양한 조합으로 사용되며 공식 webpack 스토어에서 Open Collective와 Threadless의 도움으로 출시된 멋진 의류 라인에 사용됩니다!

색상 이름HEX 코드RGB 코드예제
Malibu:HEX #8dd6f9rgb: 141, 214, 249
 
Denim:HEX #1d78c1rgb: 29, 120, 193
 
Fiord:HEX #465E69rgb: 70, 94, 105
 
Outer Space:HEX #2B3A42rgb: 43, 58, 66
 
White:HEX #ffffffrgb: 255, 255, 255
 
Concrete:HEX #f2f2f2rgb: 242, 242, 242
 
Alto:HEX #dededergb: 222, 222, 222
 
Dusty Gray:HEX #999999rgb: 153, 153, 153
 
Dove Gray:HEX #666666rgb: 102, 102, 102
 
Emperor:HEX #535353rgb: 83, 83, 83
 
Mine Shaft:HEX #333333rgb: 51, 51, 51
 

또한, 아래 링크에서 직접 다음 파일 형식을 가져올 수 있습니다.

psd | png | ai | svg

License

로고와 브랜드 이름은 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에 알려주고 번들 항목을 알기 위해 디펜던시 그래프를 따릅니다. 애플리케이션의 엔트리 포인트를 번들로 묶으려는 문맥적인 루트로 생각할 수 있습니다.

H

  • Hot Module Replacement (HMR): 전체 페이지를 다시 로드하지 않고, 애플리케이션이 실행되는 동안 modules을 교환, 추가 혹은 제거하는 프로세스 입니다.

L

  • Loaders(로더): 모듈의 소스 코드에 적용되는 변환입니다. 파일을 require() 또는 "로드" 할 때 파일을 사전 처리 할 수 있습니다. '작업 실행자(task-runner)'와 유사합니다.
  • Lazy Loading(지연 로딩): 애플리케이션의 일부분(청크)을 느리게 로드하는 프로세스 입니다.

M

  • Module(모듈): 전체 프로그램보다 더 작은 표면적을 제공하는 기능의 개별 청크입니다. 잘 작성된 모듈은 일관성 있는 설계와 명확한 목적을 설정하는 견고한 추상화 및 캡슐화 경계를 제공합니다.
  • Module Resolution(모듈 해석): 모듈은 다른 모듈의 의존성으로 필요할 수 있으며, 리졸버는 절대 경로로 모듈을 찾는데 도움이 되는 라이브러리입니다. 모듈은 resolve.modules에 지정된 모든 디렉터리 내에서 검색됩니다.
  • Manifest(메니페스트): 런타임은 메니페스트를 사용하여 모듈이 번들되고 브라우저에 제공되면 모듈을 확인하고 로드합니다.

O

  • Output: 컴파일 된 파일을 디스크로 출력 할 위치를 지정하는 옵션입니다.

    주의, 여러 진입 점이 있을 수 있지만 하나의 출력 설정만 지정됩니다.

P

  • 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 애플리케이션을 위한 고도로 설정 가능한 모듈 번들러.

License

webpack

Webpack은 MIT 라이선스입니다.

webpack logo and icon

webpack의 로고와 아이콘은 여기에서 확인 할 수 있는 다른 라이선스를 따릅니다.

webpack documentation

https://webpack.js.org/의 콘텐츠는 Creative Commons BY 4.0의 라이선스에 따라 사용할 수 있습니다. 즉, 콘텐츠를 다른 곳에서 사용하려면 저작자 표시가 필요합니다.

webpack code samples

코드 예제는 CC0 1.0 Universal (CC0 1.0) (Public Domain)를 사용하며 원하는 대로 자유롭게 사용할 수 있습니다.

Edit this page·Print this page

1 Contributor

webpack