본문 바로가기

Bundler

 (13)
[Webpack] 동적으로 HTML 생성하기 (HTMLWebpackPlugin) Intro. 번들링 시, 만약 output파일이 여러개로 나눠지거나, 아니면 번들에 해시값을 붙여 사용하는 경우, 매번 직접 HTML파일에 새로 생성되는 파일 이름으로 경로를 고쳐주는것은 상당히 수고스럽습니다. 이러한 문제를 html파일을 동적으로 생성함으로써, 해결할 수 있습니다. Goal Method 1. html-loader , html-webpack-plugin을 설치합니다. yarn add -D html-webpack-plugin html-loader 2. webpack config에 html 모듈을 변환 가능하겠금, html-loader를 적용시킵니다. const path = require('path'); const HtmlWebpackPlugin = require('html-webpack..
[Webpack] CSS 파일 메인 번들과 분리시키기 (MiniCssExtractPlugin) Intro. style-loader를 통한 css번들링의 단점은, css 규칙이 메인 번들에 포함된다는 점입니다. 즉, 가만 납두면 번들 하나의 사이즈가 매우 커진다는 의미지요. 게다가 css의 주입이 런타임에 일어나는 것 또한 문제입니다. 개발환경에선 상관 없을지도 모르겠으나, 배포용 환경에선 문제가 많을 것 같습니다. 일단 번들 하나의 사이즈가 커진다면, 당연히 그만큼 다운로드 받는데 오래걸릴테고 이는 곧 UX저하로 이어지겠지요. 따라서 적어도 스크립트와 CSS는 분리하여 번들링하는게 좋을 듯 합니다. Goal Before after Method 1. mini-css-extract-plugin을 설치합니다. yarn add -D mini-css-extract-plugin 2. config파일에 c..
[Webpack] CSS 번들링하기 Intro. 웹팩이 JS , JSON파일들을 번들링해줌으로써, 상당히 많은 문제들이 해결됬습니다. 다만, 이왕 번들링한거 CSS도 같이 번들링 했으면 좋겠습니다. 다만, 웹팩은 기본적으로 JS,JSON밖에 번들링 할 줄 모르기에, 추가적인 셋팅을 해주어야합니다. Goal /* Before */ /* After */ Method 1. JS 파일에, CSS파일을 import 합니다. // [entryfile].js import '../css/index.css'; ... 2. 웹팩에 CSS파일 관련 loader를 받습니다.(style-loader , css-loader) yarn add -D style-loader css-loader css-loader는 웹팩에 CSS파일을 디스크로부터 읽는 법을, sty..
[Webpack] 기초적인 개발용 환경 구성하기 Dependency webpack-merge webpack-dev-server Method 1. 각 환경별 공통 설정을 위한 파일을 생성한다. // webpack.common.config.js const path = require('path'); const config = { entry: 'path-to-entry', //ex)'/src/index.js', //각종 플러그인 etc.. 추가.. output: { path: path.resolve(__dirname, 'path-to-distribution'), //ex)'../dist' filename: 'name-of-bundle-file' //ex) 'main.js' } }; module.exports = config; 2. 각 환경별 설정 파일을 생성..
[Webpack] Intro. Intro. 꽤 오래전에 웹팩에 대해 공부했었는데, 근래 CRA로 만든 프로젝트 내부 웹팩 설정을 바꿀일이 있어 개복했다가, 그 난해함에 다시한번 공부하고 기록하고 싶어서 글을 쓰게 되었습니다. 근래에는 Vite로 번들러를 바꾸고있긴한데, 아직까지 대다수의 프로젝트가 웹팩을 번들러로 사용하고 있고, 지원하는 기능들은 대부분 비슷하다 생각하기에, 해당 주제로 글을 쓰려합니다. Why Bundler? 번들러 사용 이전의 웹 개발에선 크게 3가지 문제가 있었습니다. 속도: 많은 양의 스크립트 로딩이 곧 네트워크 병목으로 이어짐 의존성 : 각 스크립트들의 의존성을 수동으로 관리해야함. 즉, B파일이 A파일에 의존한다면, 스크립트 배열 순서를 A, B 이런식으로 순서대로 나열해야함 스코프: 각 파일의 루트 단에서..

티스토리툴바