Web Standard

플러그인 Plugins플러그인은 웹팩의 중추이다. 웹팩 자체는 웹팩 구성에서 사용하는 동일한 플러그인 시스템으로 설계된다. 또한 로더가 할 수 없는 일들을 수행할 수 있다. 구조웹팩 플러그인은 apply 메소드를 가지고 있는 자바스크립트 객체다. 이 apply 메소드는 웹팩 컴파일러에 의해 호출 되며, 엔트리 컴파일 라이프사이클에 접근 할 수 있도록 한다. ConsoleLogOnBuildWebpackPlugin.jsconst pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, compilation => { co..

로더 Loaders로더는 모듈의 소스 코드에서 적용되는 변환이다. import나 로드를 통해 파일들을 전처리 할 수 있다. 그러므로 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, 프론트엔드 빌드 과정을 처리하는 강력한 방법을 제공한다. 로더는 (TypeScript 같은) 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL로 변경할 수 있다. 심지어 로더는 CSS파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다. 예시로더를 사용해서 CSS파일을 로드하거나 TypeScript를 자바스크립트로 변환할 수 있다. 필요한 로더 설치 : npm install --save-dev css-loader npm install --save-dev ts-loader 확장자가 ..

모드 Modemode 구성 옵션은 웹팩에 내장된 최적화를 사용하도록 지시한다. string 사용 가능한 mode 값 : none , development , production(기본값) 사용법config에 mode 옵션을 주는 방식 module.exports = { mode: 'production' }; CLI를 이용 webpack --mode=production 지원하는 문자열 값 OptiondevelopmentDescriptionSets process.env.NODE_ENV on DefinePlugin to value development. Enables NamedChunksPlugin and NamedModulesPlugin.OptionproductionDescriptionSets process.e..

아웃풋 Outputoutput 설정은 웹팩이 어떻게 컴파일 된 파일을 디스크에 생성할지 표현한다. entry point는 여러개 존재할 수 있지만, output은 오직 하나만 지정될 수 있다. 사용법웹팩 구성에서 output 프로퍼티의 최소 요구사항은 filename 을 지정하는 것이다. webpack.config.jsmodule.exports = { output: { filename: 'bundle.js', } }; 위와 같은 구성은 dist 폴더에 하나의 bundle.js 파일을 생성한다. 여러개의 엔트리 포인트 Multiple Entry Points만약 여러개의 엔트리 포인트를 구성하거나 CommonsChunkPlugin 같은 플러그인을 사용해서 여러개의 chunk 를 만들고 싶다면, 각 파일들이 ..

엔트리 포인트 Entry Pointsentry 속성을 정의하는 방법은 여러가지가 있다. 싱글 엔트리(축약형) 구문 Single Entry (Shorthand) Syntaxentry: string|Array webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js' }; 위 코드는 이 코드의 축약본이다. module.exports = { entry: { main: './path/to/my/entry/file.js' } }; entry 에 배열을 선언하면 어떻게 되는가? 배열을 전달하면 multi-main entry가 생성된다. 여러개의 의존성 파일을 하나의 chunk 로 모으고 이들의 의존성 그래프를 생성하고 싶을때 유용하다. 이것은 (..

개념모던 자바스크립트 어플리케이션을 위한 스태틱 모듈 번들러 (static module bundler for modern JavaScript applications) 프로젝트에서 필요한 모든 모듈을 의존성 그래프를 만들어 매핑 -> 하나, 혹은 그 이상의 번들 생성 핵심 개념엔트리 Entry아웃풋 Output로더 Loaders플러그인 Plugins 엔트리 Entryentry point : 어떤 모듈을 사용해서 시작할지 디폴트는 ./src/index.js 이지만 수정하거나 여러개의 엔트리 포인트를 설정할 수 있다. webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js' }; 아웃풋 Output만들어진 번들을 어떤 파일명으로, 어느 폴..

이전 강좌의 코드를 활용합니다. 핫 모듈 리플레이스먼트(Hot Module Replacement - HMR)는 웹팩이 제공하는 가장 유용한 기능 중 하나입니다. 전체 새로고침 없이 모든 종류의 모듈들을 런타임 시점에 업데이트 되게 해줍니다. 이 가이드에서는 구현에 초점을 두고 설명합니다. 어떻게 동작하는지, 왜 유용한지에 대한 더 자세한 내용은 concept page 를 확인하십시오. HMR 은 프로덕션에서 사용하기 위한 것이 아닙니다. 개발에서만 사용하십시오. 자세한 내용은 building for porduction guide를 참고하십시오. HMR 사용이 기능은 생산력 향상에 도움을 줍니다. 우리가 해야할 일은 webpack-dev-server 구성을 업데이트하고, 웹팩에 내장된 HMR 플러그인을 사..

이전 강좌의 코드를 활용합니다. 가이드를 계속 따라오고 있다면, 웹팩 기초에 대한 확실한 이해가 있을 것입니다. 계속 진행하기 전에, 삶을 보다 쉽게 만들어 줄 개발 환경 설정을 살펴보겠습니다. 이 가이드에서 활용되는 도구들은 오직 개발development 환경을 위한 것이므로, 프로덕션 환경에서는 사용하지 마십시오. 소스맵 사용 Using source maps웹팩이 소스 코드를 번들로 묶을때, 에러와 경고를 원래 경로로 추적하기 어려워질 수 있습니다. 만약 3개의 파일들(a.js, b.js, c.js)을 하나의 bundle.js 파일로 묶으려 하고, 이 중 하나의 파일이 에러를 포함하고 있다고 가정했을때, stack trace는 단순히 bundle.js를 가리킬 것입니다. 이것은 어떤 소스파일이 에러를..

이전 강좌의 코드를 활용합니다. 지금까지 우리는 모든 에셋을 수동으로 index.html 에 포함시켰습니다. 하지만 어플리케이션이 커지면서 파일이름에 해시를 사용하고 여러 번들을 출력하기 시작하면, index.html 파일을 수동으로 관리하는것은 어려워 질 것입니다. 이 프로세스를 훨씬 더 쉽게 관리해주는 몇몇 플러그인이 존재하니, 알아봅시다. 준비 Preparation먼저 프로젝트를 약간 수정해 봅시다. project webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js + |- print.js |- /node_modules src/print.js 에 몇가지 로직을 추가합니다. src/print.jsexport de..

처음부터 가이드를 잘 따라왔다면 “Hello webpack” 이 보여지는 작은 프로젝트를 가지고 있을 것입니다. 이제 몇몇 다른 에셋들(이미지등)을 병합시키는 방법을 알아보겠습니다. 이전 웹팩에서는, 프론트엔드 개발자들이 이 에셋들을 처리하고, /src 폴더에서 /dist 나 /build 폴더로 옮기기 위해 그런트나 걸프같은 툴을 사용했습니다. 같은 아이디어가 Javascript 모듈에 사용되었지만, 웹팩같은 툴은 동적으로 모든 의존성 번들을 처리 했습니다(의존성 그래프 생성). 이것이 대단한 이유는, 이제 모든 모듈이 의존성을 명시적으로 선언하고, 사용하지 않는 모듈들을 번들에서 제외할 수 있기 때문입니다. 웹팩의 가장 멋진 기능 중 하나는 Javascript 외에 로더가 있는 어떤 종류의 파일도 포함..