webpack 초기 환경 설정
1. Node.js 환경 설정
node.js 들어가서 자신의 컴퓨터에 맞는 환경 다운로드하기
- Node.js 란?
자바스크립트를 개발 언어로 사용하는 소프트웨어 플랫폼
여러 빌드 시스템들은 Node.js의 스트림 기능을 기반하고 있기 때문에 컴퓨터에 설치되어 있어야함
설치 과정 중에 "npm package manage" 라는 항목이 있는데 이를 NPM(node package manager)라고 하는데
Node.js 기반의 패키지 모듈들을 관리하는 도구이다.// CLI // 설치한 node 버전 확인하기 node --version - CLI 기본 명령어
$ cd Desktop // 현재 위치에서 다른 디렉터리로 이동하기 위해서 cd(Change Directory) 명령어를 입력한 후 디렉터리 이름을 입력 $ cd .. // 현재 디렉터리에서 바로 상위 디렉터리로 이동하기 위해서 cd 명령어 뒤에 이중 점(..)을 입력 $ cd ../.. // 상위에서 상위의 디렉터리로 이동하려 할때는 슬래시(/)로 구분하여 이중 점을 두번 입력 $ c:\ // c 드라이브로 이동 $ d:\ // d 드라이브로 이동 $ mkdir study // make directory의 약어로 새로운 디렉터리를 생성하고자 할때 사용 $ mkdir css js images include // 생성할 디렉터리 이름을 공백으로 구분하여 나열하면 여러 개의 폴더를 한 번에 생성 가능 $ ls // ls (List의 약어) 명령어를 사용하여 현재 위치에서의 디렉터리에 들어있는 파일 목록들을 확인 // 파일 이름이나 폴더이름들은 가로 방향으로 나열되면서 출력됨 $ ls -l # ls 명령어 뒤에 옵션 플래그인 대쉬(-)와 소문자 l 을 입력하여 실행하게 되면 // 파일 사용권한, 소유자, 그룹, 크기, 날짜, 시간등의 상세한 정보가 출력 $ ls -a // 플래그 -a 는 숨겨진 파일까지 표시 $ ls -al // -a, -l 옵션 플래그를 사용하면 나오는 정보가 출력 $ ls css/ $ ls js/ // 현재 디렉터리의 하위 디렉터리 파일 목록을 확인하고자 할 때 ls 명령어 뒤에 하위 디렉터리 이름을 입력 $ pwd // pwd (print working directory) 명령어는 현재 작업 중인 디렉터리의 절대 경로를 출력 $ clear // 의미대로 그동안 실행했던 명령어와 명령어에 따른 결과 출력들이 깨끗하게 삭제 $ exit // exit 를 입력하면 CLI 도구가 종료 - npm init
일반적으로 webpack을 구성하기 전에 프로젝트의nodemodules를 관리하기 위해 package.json 을 설정해야 함 배포(publish)할 때 반드시 필요한 파일 여러 정보를 사용자에게 물어보는데 값을 입력할때는 제외하고는 enter를 눌러 넘어감.
설치 완료하면 편집창에 package.json 파일이 생성되어 있는지 확인
// CLI npm init
2. webpack 설치하기
- npm install -D webpack webpack-cli
webpack을 설치를 하기위해 쓰는 명령어이며, 최신버전(4이상) 설정 할경우 webpack-cli을 필수로 다운받아야한다.
따로 써서 설치할 수 있지만, 편의성을 위해 동시사용
packge.json 안에 devDependencies 이 생기면 완료된 것
- webpack.config.js
webpack.config.js 약속된 이름으로 생성하면, 알아서 번들링을 한다.
// CLI // webpack 에게 entry 파일과 output 을 선언하는 명령어 // 프로젝트가 커질수록 명령어 사용이 번거로움으로 설정파일(webpack.config.js) 사용 npx webpack --entry ./src/index.js --output ./public/index_bundle.js
// webpack.config.js
// webpack 명령은 기본적으로 이 설정으로 시작
// nodejs에서 파일을 쉽게 해들링 할 수 있는 일종의 부품
const path = require('path');
module.exports = {
// 웹팩 v4부터는 mode 필수
// mode 는 production, development, none 3가지 옵션이 존재
// mode 의 production 은 각 설정마다 내장된 최적화 옵션을 자동으로 설정하여 줌
mode: "development",
// 시작이 해당되는 파일 입력
// === npx webpack --entry ./src/index.js 랑 같음
entry: {
// 앞에는 이름 : 뒤에는 경로
// 번들링
index : "./src/index.js",
about : "./src/about.js"
},
output: {
//__dirname는 현재 webpack.config.js 경로를 알려주는 것.
// dist의 하위 경로에 결과물을 가져다놓으라는 뜻
path: path.resolve(__dirname, "dist"),
// [name] 번들링 하려고 하는 이름을 오게하는 변수가 대괄호이며,
// 대괄호안에 name이라고 쓴다
filename: '[name]main.js'
}
}
- 로더(Loader)
webpack은 자바스크립트 파일만 읽어 올 수 있기 때문에, css(스타일시트)나 이미지 등을 webpack이 읽을 수 있는 자바스크립트로 변경되어야 하는데, Loader가 webpack이 이해 할 수 있는 모듈로 변경해 주는 역할을 함.
// CLI
// css를 번들러로 로더하기 위해서 npm을 통해 설치
npm install --save-dev style-loader css-loader// idex.js
import './css/style.css'// css
@charset "UTF-8";
body {
color: tomato;
}
// webpack.config.js
// 로더를 지정하기 위한 module 정의
module: {
// module.rules 를 사용해 여러개의 로더 지정이 가능.
rules: [
{
// test : 변환 할 파일을 지정
// 정규 표현식으로 문자열 .css 확장자로 끝나는 것을 찾음
test: /\.css$/,
// use: 해당 파일을 적용할 로더의 이름
// 로더에서 모듈 로딩 순서는 배열의 요소 오른쪽에서 왼쪽으로 로딩하며 진행
use: ['style-loader','css-loader']
}
]
}
}
3. 주요 플러그인(Plugin) 설치하기
플러그인은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성
해당 결과물의 형태를 바꾸는 역할을 함 즉, 번들링된 파일을 처리함
- Htmlwebpackplugin
번들 된 파일을 스크립트로 로드한 html 파일을 자동으로 생성해주는 플러그인
//CLI
npm install --save-dev html-webpack-plugin
// webpack.config.js
// 플러그인 설정
plugins: [
new Htmlwebpackplugin({
// 빌드 전에 사용되는 템플릿
template : './index.html',
// 빌드 후에 생성될 파일명
filename : './index.html',
// entry에 지정한 이름을 대괄호 안에 넣으면 해당 파일만 가져옴
chunks: ['index']
}),
// 여러개일때 복사해서 사용하면 됨
new Htmlwebpackplugin({
template : './about.html',
filename : './about.html',
chunks: ['about']
})
]- MiniCssExtractPlugin
컴파일된 css를 별도의 css 파일로 분리하는 플러그인
// CLI
npm i --save-dev mini-css-extract-plugin
// webpack.config.js
// 경로를 설정
const path = require('path');
// node_modules 에서 불러옴
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
// MiniCssExtractPlugin 사용
use: [ MiniCssExtractPlugin.loader, 'css-loader'],
// exclude 는 제외할 폴더나 파일
// 다른 모듈을 사용해서 컴파일하지 않도록 지정(안전성 확보)
exclude: /node_modules/
}
]
},
// 플러그인 설정
plugins: [
// 컴파일 + 번들링 CSS 파일이 지정될 경로와 이름 지정
new MiniCssExtractPlugin({filename: 'src/style.css'})
]
}// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>index</title>
// 추출된 css 사용하기 위해 import 시켜주도록 함
<link rel="stylesheet" href="dist/src/style.css">
</head>
<body>
<h1>hello, index</h1>
<div id="root"></div>
<a href="./about.html">index</a>
</body>
</html>
4. webpack-dev-server
매번 소스를 수정할 때마다 webpack 을 실행했지만, 개발 단계에서는 일반적으로 로컬에서 개발용 서버를 통해서 프로젝트를 수행하기 때문에 webpack-dev-server 를 설치하여 사용하면 편리할 수 있음.
※ 웹팩 데브 서버는 개발할 때만 사용하다가 개발이 완료되면 웹팩 명령어를 이용해 결과물 파일을 생성해야 함
// CLI
npm i --save-dev webpack-dev-server
devServer: {
// 서버 포트 설정
port: 9000,
// contentBase 는 static 파일은 번들링되기 전이라든지 번들링된 이후의 결과물들을 총제적으로 한 번에 로딩할 수 있는 경로들을 의미.
// contentBase 는 웹팩 output.path 의 'publicPath' 와 동일해야 하며,
// 정적 파일을 제공할 디렉토리 설정, 소스 파일을 감시하고 변경 될 때마다 번들을 다시 컴파일
// 다시 말해, 콘텐츠를 제공할 경로지정(정적파일을 제공하려는 경우에만 필요)
// 기본값은 사용자가 작업하는 working directory 가 되고 특별히 개발계와 배포계로 나누려고 하는 경우
// 즉, 개발 자원과 배포 자원을 분리한다고 했을 때 예를 들어 배포하는 자원의 디렉토리가 public 이라고 한다면
// contentBase 의 위치를 public 으로 잡아 설정할 수 있으
// 여기서 주의할 점은 절대 경로를 사용해야 한다는 점
// contentBase: path.resolve(__dirname, 'public'), // 'dist',
// dev server 구동 후 브라우저 열기
open: true,
// 에러가 날 경우 브라우저에 표시
// 이 옵션을 사용하지 않아도 개발자 도구 콘솔에서 알려주므로 반드시 사용하지 않아도 되지만
// 에러가 났을 경우 확실히 알려주기 때문에 유용할 수 있음
// overlay: true,
// hot: HotModuleReplacementPlugin 을 사용해 HMR 기능을 이용하는 옵션
// 소스가 변경되면 자동으로 빌드되어 반영됨
// 파일이 수정될 경우 그 부분에 대해 리로드를 해주는 옵션
hot: true,
// host: 기본적으로 애플리케이션은 localhost 에서 서빙되지만 이 옵션을 이용해 다른 host 를 지정해줄 수 있음
// 또한 이 옵션에 ‘0.0.0.0’을 주면 개발중인 localhost 를 외부에서 접근할 수 있음
// host: '0.0.0.0'
// compress : gzip 압축방식을 이용하여 웹 자원의 사이즈를 줄이는 방법
// 웹 성능 최적화에 관한 기법으로 gzip(https://ko.wikipedia.org/wiki/Gzip) 은 파일들의 본래 크기를
// 줄이는 것(minification, concatenation, compression)이 아니라 서버와 클라이언트 간의 압축 방식을 의미
// compress : true
},tip! 하단에 있는 에러가 난다면?
webpack-cli의 버전 문제이므로 재설치
//CLI
Cannot find module 'webpack/bin/config-yargs'// CLI
// 재설치
npm install webpack-cli@3.3.12
5. webpack.config.js 최종
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: {
index: ['@babel/polyfill', ./src/index.js'],
about: ['@babel/polyfill', './src/about.js']
},
output: {
path:path.resolve(__dirname, "dist"),
filename: '[name]main.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader'],
// use: [ MiniCssExtractPlugin.loader, 'css-loader'],
exclude: /node_modules/
},
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'dist')
],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template : './index.html',
filename : './index.html',
chunks: ['index']
}),
new HtmlWebpackPlugin({
template : './about.html',
filename : './about.html',
chunks: ['about']
}),
new MiniCssExtractPlugin({filename: 'src/style.css'})
],
devServer: {
port : 9000,
open: true,
hot: true
}
}
'Web Tech > 그 외 기록' 카테고리의 다른 글
| DateFormat (1) | 2024.06.10 |
|---|---|
| webpack 기본-1. 개념 및 용어와 명령어 정리 (0) | 2021.06.28 |