기본 설정
# Node.js 설치
npm 명령 실행을 위함
# npm init -y
npm init는 package.json을 만들기 위한 명령이고 -y를 붙임으로써 별도의 입력 없이 기본 값으로 진행 시킴. package.json은 작성하고자 하는 프로젝트에 대한 설정 파일로 볼 수 있으며, 프로젝트 이름과 버전 등과 같은 설명과 프로젝트가 사용하는 라이브러리에 대한 정보 그리고 프로젝트 실행 등을 위한 명령에 대한 정보가 담겨있음. package.json 파일은 npm을 위한 파일임(VS.Code를 위한 것이 아님)
# npm install webpack webpack-cli --save-dev
# webpack.config.js 파일 생성 및 내용 작성
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
devtool: "inline-source-map",
module: {
rules: [],
},
resolve: {
extensions: [".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
}
# src, dist 폴더 및 index.html(dist 폴더), index.js(src 폴더) 파일 생성
# index.html 코드 입력
... <script src="bundle.js"></script> ...
# index.js 코드 입력
console.log("Hello");
# package.json 파일의 “scripts” 파트에 “bundle”: “webpack” 입력
{
..
"scripts": {
..
"bundle": "webpack"
},
..
}
# npm run bundle 실행
Typescript로 작성된 파일을 Javascript 파일로 트랜스파일링 시킴
자동 실행을 위한 설정
# package.json 파일의 “scripts” 파트에 “watch”: “webpack –watch” 및 “start”: “npm run bundle && npm run watch” 추가
{
..
"scripts": {
..
"bundle": "webpack",
"watch": "webpack --watch",
"start": "npm run bundle && npm run watch"
},
..
}
# VS.Code에서 Live Server 확장 기능 설치
# npm run start 실행
이제부터 모든 Javascript 소스 코드들을 자동으로 bundle.js 파일 하나로 묶어줌