vitamin3000 님의 블로그

이번 포스트에서는 저번에 작성한 코드를 webPack과 babel를 사용하여 번들링해보려 한다. [참고 webpack 관련 게시글]https://vitamin3000.tistory.com/tag/webpack 우선,(1) CLI환경에서 아래의 명령어를 실행하여 webPack과 babel을 설치한다. npm install webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev  (2) 루트 디렉토리에 webPack.config.js 파일을 만들어 아래의 코드를 작성한다. const HtmlWebpackPlugin = require('html-webpack-plu..

Plugins은 로더가 할 수 없는 다른 작업을 수행할 목적으로 제작되었다. 1. Anatomywebpack 플러그인은 apply 메서드를 가지고 있는 객체이다apply 매서드는 webpack 컴파일러에 의해 호출되며, 전체 컴파일 라이프사이클에 접근할 수 있다.*apply :  수신 객체의 함수를 사용하지 않고 수신 객체 자신을 다시 반환 하려는 경우에 apply 를 사용 const pluginName = 'ConsoleLogOnBuildWebpackPlugin';class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log(..

loader는 모듈 소스 코드에 변경 사항을 적용하는 역할을 수행한다.파일을 import하거나 "로드"할 때 TS와 같은 다른 언어에서 JS로 변환하거나 인라인 이미지를 데이터 URL로 로드 등전처리 할 수 있다JS 모듈에서 직접 CSS 파일을 import하는 작업도 수행 할 수 있다. 1. Example모든 .css 파일에 css-loader를 사용하고 .ts 파일에는 ts-loader를 사용하도록 webpack에 다음과 같이 지시할 수 있다.module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' }, } }..

output 옵션을 설정하여 컴파일된 파일을 디스크에 쓰는 방법을 webpack에 알려줄 수 있다.하나의 출력 설정만 지정된다는 점에 주의하라 1. Usagewebpack 설정의 output 프로퍼티는 최소한 객체로 값을 설정해야 하며 출력 파일에 사용할 output.filename이 제공되어야 한다.module.exports = { output: { filename: 'bundle.js', }, } 이 설정은 단일 bundle.js 파일을 dist 디렉터리에 출력한다. 2. Multiple Entry Points설정에서 하나 이상의 "청크'를 생성하면(다중 엔트리 포인트나 CommonsChunkPlugin과 같은 플러그인을 사용하는 경우) substiltution(예를 들면 [name])을..

Entry 속성을 정의하는 방법은 여러가지가 존재한다.Entry 속성을 설정할 수 있는 방법과 유용한 이유에 대해 알아보자*Entry :  webpack이 내부의 디펜던시 그래프를 생성하기위해 사용하는 모듈 1. Single Entry (shorthand) SyntaxUsage: entry: string | [string]  entry: './path/to/my/entry/file.js' // entry 속성에 대한 단일 엔트리 구문은 다음 내용의 축약된 표현이다 entry: { main: './path/to/my/entry/file.js', }, 다중-메인 엔트리로 알려진 것을 생성하기 위해 entry 속성에 파일 경로를 배열로 전달할 수 있다.이를 통해 여러 의존성 파일을 한 번에 주입하고 해당 의..

Webpack : JS 애플리케이션을 위한 정적 모듈 번들러라고 한다번들러란 ? -> 간단하게, 크로스 브라우저 이슈를 예방하기 위해 모든 브라우저에서 동작하는 버젼 수준으로 변환하는 것이다. Webpack이 애플리케이션을 처리할 때 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다 *디펜던시 그래프 : 하나의 파일이 다른 파일에 의존할 때마다, webpack은 이것을 의존성으로 취급한다.이를 통해 webpack은 이미지 또는 웹 폰트와 같은 코드가 아닌 애셋(assets)을 가져와 애플리케이션에 의존성으로 제공한다. 1. Entry엔트리 포인트는 webpack이 내부의 디펜던시 그래프를 생성하기위해 사용하는 모듈이다.Webpack은 엔트리 포인터가..

이번 카테고리는 Webpack 공식 홈페이지 따라하기 이다. 시도하게된 이유는 패스트캠퍼스 김민태 강사님이 무언가를 보고 경외롭게 생각하지말고 직접 따라해본다면 별 것 아니게 느껴질 것이다.라고 하셨기에, 별 것 아니게 느끼기위해서이다.