npm 초기화 및 git 설정하기
- myApp 폴더 생성
mkdir myApp
cd myApp- npm package 초기화
npm initwebpack 설정하기
- webpack 모듈 설치
npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm install -D @babel/core @babel/preset-env babel-loader- -D : devDependencies 로 설정하여 배포 서버에서는 해당 모듈들을 설치하지 않을 수 있다.
- webpack : 번들러 모듈
- webpack-cli : webpack 명령어를 사용할 수 있게해주는 모듈
- webpack-dev-server : 실시간으로 변경사항을 보여주는 live server
- html-webpack-plugin : template html 파일에 번들 파일을 자동으로 추가해주는 플러그인
- @babel/core : 트랜스파일러 모듈
- @babel/preset-env : 트랜스파일링 기본 preset 모듈
- babel-loader : 트랜스파일링 하기위한 파일 loader
- webpack 설정 파일 생성
touch webpack.config.js// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.ts", // 번들링 시작 위치
output: {
path: path.join(__dirname, "/dist"), // 번들 결과물 위치
filename: "bundle.js",
},
module: {
rules: [
{
test: /[\.js]$/, // .js 에 한하여 babel-loader를 이용하여 transpiling
exclude: /node_module/,
use: {
loader: "babel-loader",
},
},
{
test: /\.ts$/, // .ts 에 한하여 ts-loader를 이용하여 transpiling
exclude: /node_module/,
use: {
loader: "ts-loader",
},
},
],
},
resolve: {
modules: [path.join(__dirname, "src"), "node_modules"], // 모듈 위치
extensions: [".ts", ".js"],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html", // 템플릿 위치
}),
],
devServer: {
host: "localhost", // live-server host 및 port
port: 5500,
},
mode: "development", // 번들링 모드 development / production
};
typescript 설정하기
- typescript 모듈 설치
npm install -D typescript ts-loader- typescript 설정 파일 생성
touch tsconfig.json// tsconfig.json
{
"compilerOptions": {
"module": "ES6", // 모듈 형식 ES6
"moduleResolution": "Node", // 모듈 해석 Node
"esModuleInterop": true, // commonJS 모듈을 ES6로 import
"sourceMap": true, // 디버깅 맵
}
}소스파일 생성
- src 폴더 생성
mkdir src
cd src
touch index.html
touch index.ts<!-- index.html -->
<!DOCTYPE html>
<head></head>
<body>
<button id='button'>myButton</button>
</body>// index.ts
const button = document.getElementById("button");
button.addEventListener("click", () => {
alert("clicked!");
});package.json 스크립트 수정
// package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open", // live server 명령어
"build": "webpack" // build 명령어
},live server : npm start
build : npm run build
git 설정 및 원격 저장소 업로드
git init
git remote add origin 저장소 URI
git remote -v // 확인- .gitignore
node_modules/-
stage 및 커밋하여 해당 파일 원격저장소로 push
-
차후 보일러플레이트로 사용 가능 ( https://github.com/SSH1997/webpack-typescript-boilerplate )
FE개발자