[웹팩][바벨] 패키지 총 설치

 

번들링 : 모든 파일들을 하나하나의 모듈로 보고, 이 모듈들을 배포용으로 병합하고 포장하는 작업.(최적화도 해줌)

 

이러한 번들링 작업을 수행하는 툴을 번들러라고 한다.

 

현재 시점에서는 번들러 중에서 '웹팩'이 가장 인기가 많다.

 

처음 package.json 상태

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress",
    "start": "webpack serve --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

const webpackMode = process.env.NODE_ENV || 'development';

module.exports = {
	mode: webpackMode,
	entry: {
		main: './src/main.js',
	},
	output: {
		path: path.resolve('./dist'),
		filename: '[name].min.js'
	},
	// es5로 빌드 해야 할 경우 주석 제거
	// 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함
	// target: ['web', 'es5'],
	devServer: {
		liveReload: true
	},
	optimization: {
		minimizer: webpackMode === 'production' ? [
			new TerserPlugin({
				terserOptions: {
					compress: {
						drop_console: true
					}
				}
			})
		] : [],
		splitChunks: {
			chunks: 'all'
		}
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.js$/,
				enforce: 'pre',
				use: ['source-map-loader'],
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new CleanWebpackPlugin(),
		// CopyWebpackPlugin: 그대로 복사할 파일들을 설정하는 플러그인
		// 아래 patterns에 설정한 파일/폴더는 빌드 시 dist 폴더에 자동 생성
		// patterns에 설정한 경로에 해당 파일이 없으면 에러 발생
		// 사용하는 파일이나 폴더 이름이 다르다면 변경
		// 그대로 사용할 파일들이 없다면 CopyWebpackPlugin 통째 주석 처리
		new CopyWebpackPlugin({ //여기에는 dist 폴더에 그대로 복제시킬 파일들을 작성
			patterns: [
				{ from: "./src/style.css", to: "./style.css" },
				{ from: "./src/images", to: "./images" },
			],
		})
	]
};

 

 

<1> 이렇게 할 수도 있지만 아래 <2>를 터미널에 적용

JS만 간단히 빌드하는 웹팩 세팅

1. 패키지 설치
npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin core-js cross-env terser-webpack-plugin webpack webpack-cli


2. 빌드(배포용 파일 생성) : 개발 후 최종 실제로 서비스할 배포용 파일. 사실상 번들링, 최종 파일을 만드는 작업
npm run build

(!)
npm run build 실행 시 에러가 난다면 Node.js를 LTS 버전(장기 지원 버전)으로 설치 후 다시 시도
n lts

 

<2> 적용 후 결과는

 

1. 패키지 설치 : -D 는 개발시에만 쓴다는 것을 명시
npm i -D @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js cross-env html-webpack-plugin source-map-loader terser-webpack-plugin webpack webpack-cli webpack-dev-server


2. 개발용 서버 구동
npm start


3. 빌드(배포용 파일 생성)
npm run build


(!)
npm start 또는 npm run build 실행 시 에러가 난다면 Node.js를 LTS 버전(장기 지원 버전)으로 설치 후 다시 시도
n lts


(!)
ERROR in unable to locate '경로...'
위와 같은 에러가 발생한다면, webpack.config.js의 CopyWebpackPlugin에 설정된 파일이 있는지 확인
CSS나 이미지 폴더 등이 필요하지 않다면 webpack.config.js에서 CopyWebpackPlugin 부분 전체를 주석 처리

 

<2>에서 1 터미널 입력 후 package.json 상태

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress",
    "start": "webpack serve --progress"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.4",
    "core-js": "^3.22.4",
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^5.5.0",
    "source-map-loader": "^3.0.1",
    "terser-webpack-plugin": "^5.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

협업시, 위 패키지 파일만 있다면

npm i를 입력해주면, 협업 상대방도 패키지들을 자동 설치받아 볼 수 있다.

 

웹팩은 개발할 때만 쓰는 것이기 때문에 -D 옵션을 넣어주도록 하자

 

 

<2>2. 개발용 서버 구동 : 종료는 컨트롤 c
npm start : 성공적으로 구동이 되면 터미널에 주소값이 나온다. 해당 주소에 들어가면 웹을 볼 수 있다.
통상 src 폴더에 프로젝트 파일들을 담아 둔다.

<3>3. 빌드(배포용 파일 생성)
npm run build

dist 라는 새로운 폴더가 생성되고, 최종 배포용 파일들을 확인할 수 있다(다 최적화, 압축된  상태)

 

 

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

const webpackMode = process.env.NODE_ENV || 'development';

module.exports = {
mode: webpackMode,
entry: {
main: './src/main.js', //자바스크립트 모듈을 빌드할 때, 시작점이 되는 파일(엔트리 기준 파일)
},
output: { //빌드했을 때 dist 파일이 자동 생성되면서 그 안에 번들링된 파일들이 생겨남
path: path.resolve('./dist'),
filename: '[name].min.js' //파일 이름까지 지정 가능
},
// es5로 빌드 해야 할 경우 주석 제거
// 단, 이거 설정하면 webpack-dev-server 3번대 버전에서 live reloading 동작 안함
// target: ['web', 'es5'],
devServer: {
liveReload: true //자동 새로고침 설정
},
optimization: {
minimizer: webpackMode === 'production' ? [
new TerserPlugin({ //빌드할 때 코드 압축되도록
terserOptions: {
compress: {
drop_console: true //찍어놓은 콘솔로그 지우기
}
}
})
] : [],
splitChunks: {
chunks: 'all'
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
enforce: 'pre',
use: ['source-map-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
minify: process.env.NODE_ENV === 'production' ? {
collapseWhitespace: true,
removeComments: true,
} : false
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{ from: "./src/main.css", to: "./main.css" },
{ from: "./src/images", to: "./images" },
],
})
]
};

<웹팩으로 자바스크립트 모듈 번들링해보기>

babel.config.js : 바벨은 최신 문법으로 작성된 자바스크립트의 버전을 다운그레이드 시켜주는 역할을 한다.

예전 브라우저에도 잘 돌아가게끔 하기 위함 ( 트랜스파일러)

특히 바벨은 웹팩과의 조합이 좋기에 보통 웹팩을 쓰면 웹팩에 바벨을 로더로 불러와서 같이 실행해준다.

module.exports = {
	presets: [
		['@babel/preset-env', {
			targets: {
				chrome: '58',
				ie: '11',
			},
			useBuiltIns: 'usage',
			corejs: {
				version: 3,
			}
		}]
	]
};