웹팩 기본 구조
📌 시작하며
웹팩과 번들의 필요성과 개념에 대한 설명은 링크를 참조
🤔 웹팩의 핵심 개념들
웹팩을 다룬다는 것은 webpack.config.js 파일을 이해하고 작성하는게 사실상 전부다.
webpack.config.js 파일만 잘 작성해 놓으면 번들링이 성공적으로 되고 빌드가 완료되는데
이 webpack.config.js파일에 옵션이 너무 많고 복잡해서 생소한 부분이 많다.
일단 웹팩 공식문서에서 제시하는 핵심개념들은 아래와 같다.
(각 링크를 클릭하면 공식문서로 넘어간다)
💡 웹팩의 모양
웹팩 설정 파일의 아주 간단한 모습은 아래와 같다.
아래는 리액트를 사용하지 않고, html,css,js만으로 이루어진 프로젝트에서
웹팩을 사용하여 번들링 할때의 설정이다.
#필수 다운로드 사항
npm i -D webpack webpack-cli
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴
filename: 'app.bundle.js',
},
module: {
rules: [
{
// loader 설정하기
// loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할을 한다.
test: /\.css$/,
// 파일명이 .css로 끝나는 모든 파일에 적용
use: ["style-loader", "css-loader"],
// 📌 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용!!
// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
// 순서 주의!
exclude: /node_modules/,
// loader가 node_modules 안의 있는 내용도 처리하기 때문에
// node_modules는 제외해야 함
}
]
},
plugins: [
// plugins 설정하기
// 플러그인은 번들링 과정 중에 개발자가 원하는 다양한 작업을 할 수 있도록 도와줌
new HtmlWebpackPlugin({
//📌 template에 번들링한 파일들을 연결할 HTML 파일을 작성해준다.
template: path.resolve(__dirname,"src","index.html")
})
]
}
위 코드의 부분 부분들을 이제 아래에서 설명한다.
🚪 Entry
어떤 파일을 번들링 해줄지 정해주는 역할을 한다.
하나의 파일을 번들링 할 경우 아래와 같이 적으면 된다.
entry: './script.js',
🛑 이때 script.js 안에서 다른 파일을 불러오고 있을 때, 그 파일들은 일일이 적어줄 필요가 없다.
만약 번들링 해야하는 파일이 많아진다면, 아래와 같이 배열의 형태로 넣을 수 있다.
entry: {
//들어갈 폴더의 경로들을 배열로 넣어준다.
//🛑 다른 파일이 불러오고 있는 파일은 적을 필요없다.
app: ['./client.js','./app.js']
},//입력
🎁 Output
생성된 번들 파일을 내보낼 위치와, 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다.
기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.
const path = require('path');
//...
output: {
path: path.resolve(__dirname, 'dist'), //🛑path를 쓰기 위해선 꼭 import 잊지말기
filename: 'app.bundle.js',
},
//...
🧩 Loader
웹팩이 기본적으로 이해하는 javaScript나 JSON 파일 이외의 파일을 불러오는 역할을 한다.
예를 들어서 css는 기본적으로 webpack이 이해할 수없는 언어기 때문에
아무런 처리 없이 아래와 같이 js파일에 require시켜주면 에러가 난다.
//index.js
require('./style.css');
//💣 problem
// node src/index.js와 npm run build 시 에러메세지 뜸
//🛑 Node.js는 그 자체만으로는 CSS를 읽을 수 없어 문법 에러 발생 (기본으론 JavaScript와 JSON 파일만 이해한다.)
//✉️ 에러 메세지: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
// 따라서! css를 위한 loader를 추가한다!
이럴때 필요한게 loader이다.
어떨 때 어떤 로더가 필요한지는 링크를 참조한다.
아래의 코드처럼 css-loader로 css를 js안에서 읽어오고 ,
읽어온 css를 style-loader를 사용해서 js에서 접근할 수 있는 style 요소 안에 담아준다.
#dev-dependencies로 css-loader와 style-loader 다운로드
npm i -D css-loader style-loader
//webpack.config.js
//💡 solution
//npm i -D css-loader style-loader
//css-loader: CSS를 JS파일 내에서 불러올 수 있음
//style-loader: 불러온 CSS를 style 요소 내에 담아줌
//...
module: {
rules: [
{
// loader 설정하기
// loader는 JavaScript, JSON이 아닌 파일을 불러오는 역할을 한다.
test: /\.css$/,
// 파일명이 .css로 끝나는 모든 파일에 적용
use: ["style-loader", "css-loader"],
// 📌 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용!!
// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
// 순서 주의!
exclude: /node_modules/,
// loader가 node_modules 안의 있는 내용도 처리하기 때문에
// node_modules는 제외해야 함
}
]
},
//...
🔌 Plugins
로더는 특정 유형의 모듈을 변환하는 데 사용되지만,
플러그인을 활용하여 번들을 최적화하거나, 애셋을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있게 해준다.
예를 들어서 html-webpack-plugin은 생성된 모든 번들을 자동으로 삽입하여
애플리케이션용 HTML 파일을 자동으로 생성해준다.
따라서, HTML에 css나 js 링크를 손수 걸어주지 않아도 된다.
#dev-dependencies로 html-webpack-plugin 다운로드
npm i -D html-webpack-plugin
//webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
//...
plugins: [
// plugins 설정하기
// 플러그인은 번들링 과정 중에 개발자가 원하는 다양한 작업을 할 수 있도록 도와줌
new HtmlWebpackPlugin({
//📌 template에 번들링한 파일들을 연결할 HTML 파일을 작성해준다.
template: path.resolve(__dirname,"src","index.html")
})
]
//...
