Webpack을 사용할 때 css-loader를 적용해서 css 파일을 처리하는게 일반적이다. 그런데, css의 url 을 사용했을 때 해당 파일이 file-loader를 타는 것이 아닌 css-loader 내에서 처리되는 문제가 발생했다. background-image: url("./assets/images/hero-img.png"); 이런 경우 당황하지 말고 css-loader의 url 옵션을 false로 변경해주면 된다. const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: process.env.NODE_ENV, devtool: "sourc..

1. Webpack? 우선 웹팩이 무엇일까? 위 이미지에서 보이는 것처럼 여러가지 얽힌 복잡한 파일들을 간단하게 만들어주고 있다. 그래서 Webpack을 모듈 번들러라고 한다. 즉, 여러 개로 나뉘어진 파일들을 묶어서 하나의 파일로 만들어준다. 근데 이런 과정이 왜? 필요할까? 웹 페이지는 다양한 html, js, css, png, ... 등 파일로 구성되어 있다. 그말은 웹페이지가 구성되려면 많은 파일들을 요청해야 한다는 것이다. http/2 커넥션이라면 동시에 여러 파일을 요청할 수 있지만, 현재 많이 사용되고 있는 http/1.1에서는 한번의 요청에 하나의 파일만 받을 수 있다. 즉, 요청 해야하는 파일이 많아지면 그만큼 오래 기다려야해서 비효율적이다. 이러한 요청을 줄이기 위한 방법이 번들러이다...

1. 나무 흔들기 나무 흔들기(tree shaking)는 불필요한 코드를 제거해 주는 기능이다. 웹팩은 기본적으로 나무 흔들기 기능을 제공한다. 단, 웹팩에서 제대로 동작하지 않는 경우가 있다. 나무 흔들기를 잘 이해하고 있어야 번들 크기를 최소로 유지할 수 있다. npm install webpack webpack-cli // src/util_esm.js export const func1 = () => { console.log("func1_esm"); }; export const func2 = () => { console.log("func2_esm"); }; ESM(ECMAScript Modules) 문법을 사용하는 코드다. ESM에서는 import, export 등의 키워드를 사용한다. // src/u..

1. Plugin? Webpack의 Plugin은 로더보다 강력한 기능을 가지고 있다. 로더는 특정 모듈에 대한 처리만 담당하지만 Plugin은 Webpack이 실행되는 전체 과정에 개입할 수 있다. 2. 프로젝트 준비 npm install webpack webpack-cli react react-dom import React from "react"; import ReactDom from "react-dom"; const App = () => { return ( Webpack Plugin ); }; ReactDom.render(, document.getElementById("root")); 테스트를 위해서 간단한 React 프로그램 코드를 작성하였다. npm install @babel/core @babe..

0. Webpack? 웹팩은 모듈 번들러이다. 여기서 모듈은 각 리소스 파일을 말하고, 번들은 Webpack 실행 후 나오는 결과 파일이다. 하나의 번들 파일은 여러 모듈로 만들어진다. 즉, Webpack을 이용하면 우리가 제작한 여러 가지 리소스(js, css, ... )를 사용자에게 전달하기 좋은 형태로 만들 수 있다. 필요 이유? 초기 웹 페이지는 페이지가 바뀔 때마다 새로운 HTML을 요청해서 화면을 그리는 방식이었다. 자바스크립트는 돔을 간단하게 조작하는 역할만 했고, Ajax가 유행했을 때는 자바스크립트의 비중이 더 커졌지만 페이지당 자바스크립트 파일 몇 개면 충분했다. 하지만 SPA가 나오면서 하나의 HTML에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 기존 방식이 통하지 않았다...