coding- w00se

dotenv란? .env라는 파일에서 변수를 불러와서 process.env에 변수를 삽입해주는 패키지 웹팩의 DefinePlugin과 함께 사용하면, 빌드된 파일에 환경 변수를 주입할 수 있다. 설치 npm install --save dotenv활용법 프로젝트의 root 디렉터리에 .env 파일 생성 후 환경 변수 선언 // .env API_KEY="123" webpack.config.js 파일에서 DefinePlugin 설정 // webpack.config.js require('dotenv').config(); module.exports = { ... plugins: [ ... new webpack.DefinePlugin({ // .env 파일의 API_KEY 값을 API_KEY 환경 변..

webpack-dev-server란? webpack-dev-server의 깃헙 공식문서에 의하면 아래와 같은 설명이 있다. Use webpack with a development server that provides live reloading. 해석을 하면 'webpack 개발 서버를 제공하며, 이 개발서버는 live reloading의 기능이 있다.' 이다. 즉, 파일에 변화가 생겼을 때 자동으로 reloading되는 개발 서버를 제공하는 패키지이다. 설치 npm install --save-dev webpack-dev-server html-webpack-plugin❗️html-webpack-plugin 플러그인은 빌드 파일이 저장되는 output 경로에 html문서를 포함시켜주는 플러그인..

플러그인(Plugin) 플러그인은 로더가 할 수 없는 다르 작업을 수행할 목적으로 제공됩니다. 플러그인은 번들된 파일에 후처리 작업을 할 때 사용된다. ex. 번들된 파일 맨 위에 build 시간을 주석으로 삽입하는 작업 플러그인을 만들면 플러그인의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 플러그인을 만드는 예제는 김정환 님 블로그에 자세히 나와있습니다. 플러그인 설정 방법 플러그인은 webpack.config.js 파일에 plugins 속성에 배열로 등록합니다. 예제 코드 const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', entry: { main: './src..

로더(Loaders) webpack은 기본적으로 Javascript와 JSON 파일만 이해합니다.(= 모듈화 할 수 있습니다.) css, 이미지 파일, 폰트 등의 다른 유형의 파일들을 번들하기 위해서는 로더(Loader)의 도움을 받아 처리해야 합니다. 즉, 로더는 Javascript와 JSON을 제외한 다른 유형의 파일들의 처리하여 모듈화 가능하게 해 줍니다. 커스텀 로더를 만들면 로더의 동작 원리를 이해하는데 도움이 됩니다. 커스텀 로더를 만드는 예제는 김정환님 블로그에 잘 나와있습니다. 로더 설정 방법 로더는 webpack.config.js 파일에 modules 객체의 rules 속성에 배열로 등록합니다. 예제 코드 // webpack.config.js const path = require(&#39..

webpack 이란 무엇인가? webpack은 모듈 번들러이다. 각 모듈의 의존 관계를 파악해서 하나의 묶음 파일(bundle)로 만들어준다. 로더를 사용하면 css 하나의 javascript에 통합할 수 있다. 왜 필요한가? webpack이 필요한 이유는 등장하게 된 배경과 연관이 있습니다. webpack의 등장 배경에 대해서는 이 글에 자세히 정리되어 있습니다. 간략히 목록으로만 정리하면 웹팩의 등장 배경은 아래와 같습니다. 파일 단위의 모듈 관리의 필요성 웹 개발 작업 자동화 도구 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 webpack 설치 및 설정 webpack 설치 npm install --save-dev webpack webpack-cliwebpack 설정 webpack의 기본 설정 파일..

Webpack이란 무엇인가? At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. 위는 webpack 공식 문서에 나온 webpack에 대한 설명이다. webpack은 module bundler(모듈 번들러)이며 webpack은 프로젝트에 사용된 module의 의존성 그래프를 바탕으로 하나 이상의 bundle을 생성한다. '실전 ..