webpack 개념과 적용방법

webpack이란?

 

- 모듈 번들링이라고 한다.

- html 파일에 들어가는 JS파일들을 하나의 파일로 만들어주는 방식을 모듈 번들링이라고 한다.

> 쉽게말해 다수의 JS파일들을 하나의 JS파일로 만들어주는 것을 webpack이라고 할 수 있다.

사용하는 이유

- SPA가 나오기 이전 html을 요청해 뿌려서 화면을 보여줬는데

SPA가 등장한 이후 하나의 HTML페이지에 여러가지 자바스크립트 파일이 포함된고 연관되어 있는 JS 종속석 있는 파일들을 하나의 파일로 묶어줘 관리하기가 편하다.

 

- 파일을 컴파일 할 때, 여러 모듈을 읽어오는데 시간이 오래거리는 것을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.

> 하나의 JS파일로 만들어 웹페이지 성능 최적화

 

webpack 설치

 

1. npm init -y

 

2. npm i -D webpack webpack-cli

 

3. npm install webpack --save -dev

 

> package.json 파일이 생성되고 다음과 같이 나오면 올바르게 설치된 것

{	...
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
  	...
}

 

4. 루트 디렉토리에 webpack.config.js 파일 생성

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
    entry: "./src/main.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: "./public/index.html", // 템플릿 위치
        }),
        new webpack.HotModuleReplacementPlugin()

    ],
    devServer: {
        host: "localhost", // live-server host 및 port
        port: 5500,
        hot: true // hot reload
    },
    mode: "development", // 번들링 모드 development / production
};

 

npm run build 시 dist 디렉토리 안으로 번들 js와 index.html이 들어간다!

webpack-dev-server

1. npm i webpack-dev-server

 

package.json의 scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack",
    "dev:": "webpack-dev-server" // npm run dev로 실행
  },

Hot Module Reload(HMR)

webpack.config.js에서 설정해둔

entry: "./src/main.ts" >> main.ts의 변화를 감지해 js파일로 컴파일 후 빌드!

쉽게 말해 vscode의 plugin 중 live server의 기능을 해준다고 볼 수 있다!