Webpack
Webpack은 Entry Point(시작점)에서 의존적인 모듈들을 하나의 Output(결과물) 파일로 만들어 주는 모듈러다.
설치
npm install -D webpack-D 옵션을 추가하여 설치하면 package.json 파일 내에서 devDependencies에 추가된다.
webpack, ESlint, Prettier와 같은 라이브러리를 설치할 때는 개발환경에서 쓰이는 라이브러리(devDependencies)와 애플리케이션 동작과 직접적으로 연관된 라이브러리(dependencies)를 분리해서 설치하는 것이 좋다.
devDependencies에 추가된 라이브러리는 실제 배포 시에는 포함되지 않기 때문에 빌드 시간을 줄일 수 있다.
구성
작업 디렉터리 최상단에 webpack.config.js 파일을 만들어 webpack 설정을 구성할 수 있다.
//
const path = require("path"); // 경로를 만들어주는 기본 Node.js 패키지
module.exports = {
mode: "development",
entry: {
main: "./src/index.js",
},
output: {
filename: "output.js",
path: path.resolve("./dist"),
},
};entry 속성
entry는 webpack 내부에서 의존성 그래프를 생성하는데에 사용된다.
entry 속성 값을 작성할 때는 중괄호 안에 넣어 줘야 하는데, 단일 값인 경우 중괄호를 제외하고 작성할 수 있다.
entry 속성 값으로 넣은 파일이 의존하는 다른 모듈과 라이브러리를 webpack이 찾아내서 하나의 javascript 파일을 만들어 준다.
output 속성
output은 webpack이 생성한 번들 파일을 내보낼 위치와 파일의 이름을 지정하는 속성이다.
default로는 './dist/main.js'로 설정되어 있다.
로더(loader)
webpack은 일반적으로 js와 json 파일만 이해하는데, 로더를 사용하면 txt 파일 등 다양한 파일을 js로 변환할 수 있다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: {
new HtmlWebpackPlugin({
template: "./public/index.html",
})
},
mode: 'development',
};test 속성에는 변환이 필요한 파일을 입력하고,
use 속성에는 변환을 수행하는 로더를 지정하면 된다.
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
위 코드를 해석해 보면 .txt로 끝나는 모든 파일에 대해 raw-loader를 사용해 js로 변환하라는 뜻이다.
정규식을 사용하여 test 속성 값을 입력한 경우 따옴표를 넣지 않아야 한다.
따옴표를 사용하면 따옴표 안에 입력된 문자열에 해당하는 파일을 찾는다.
가령 css파일이 엔트리 파일과 연관된 파일에 import된 경우 아래와 같이 적절한 로더를 사용하라고 나오는데, 이 때 css-loader를 설치한 후 module에 추가해 주면 된다.
ERROR in ./src/style.css 1:5
Module parse failed: Unexpected token (1:5)
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#loadersmodule: {
rules: [
{
test: /\.css$/,
use: "css-loader"
}
]
}위와 같이 설정했다면 css 코드가 js 파일로 변환된다.
plugins 속성
로더가 파일을 변환하는데 사용된다면 plugin은 번들을 최적화하거나 에셋을 관리 하는 등의 여러 작업을 수행하는데에 사용된다.
위의 예제에서 html-webpack-plugin은 정의해 놓은 html 파일에 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성한다.
mode 속성
mode의 값으로 development, production, none 이 사용될 수 있는데, 각각에 맞춰 webpack에 내장된 최적화를 활성화한다. default는 production이기 때문에 개발 시에는 development로 정의해 줘야 한다.
실행
npx webpack 을 CLI에 입력하면 번들이 생성된다.
위에 있는 구성 파일과 동일하게 설정한 경우 dist 폴더 아래에 html 파일과 js 파일이 생성된 것을 확인할 수 있다.
npx를 사용해 webpack을 실행하려면
webpack-cli설치가 필요하다.
