Vanilla JS에서 번들링 하기

Donggu(oo)·2023년 1월 18일

webpack

목록 보기

3/7

1. package.json 파일 생성

웹팩은 npm을 이용하여 설치해야 하기 때문에 npm init -y 패키지를 생성(초기화) 해준다.

npm init -y

2. webpack 설치하기

npm으로 webpack과 webpack-cli를 설치한다.

npm install -D webpack webpack-cli

3. webpack.config.js 파일 생성

웹팩은 우선 번들링하길 원하는 파일을 확인하고(entry), 여기에 import한 라이브러리나 코드가 있으면 해당 코드를 모두 인식해서 하나의 번들(output)로 압축한다.
webpack 설정 파일인 webpack.config.js 파일에 entry와 output 정보를 먼저 작성한다.

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 깃허브 페이지 배포 시 `docs`로 변경
        filename: 'app.bundle.js',
    },
};

4. 번들링 하기

1) js 파일 번들링

1-1. 하위 js파일들을 최상위 js파일에 불러오기

하위 js 파일(src/data.js)을 최상위 js 파일(src/script.js)에서 불러올 수 있도록 export 해준다.

최상위 js 파일(src/script.js)에서 하위 js 파일(src/data.js)을 불러온다.

1-2. js파일 번들링 하기

npx webpack 명령어를 이용해 src 폴더 안에 있는 js 파일을 번들링한다. 또는 package.json 파일에 "build": "webpack" 스크립트를 추가해두면 npm run build 명령어로도 번들링 할 수 있다.

npx webpack

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  <- 스크립트 추가
  },

js파일을 번들링하면 아래와 같이 output으로 지정해둔 dist 폴더가 생기고, dist/app.bundle.js 파일을 확인해 보면 webpack이 최소화(minifiy)한 코드를 확인할 수 있다.
node dist/app.bundle.js로 실행해보면 번들링한 코드가 정상적으로 출력되는지 확인할 수 있다.

2) CSS 파일 번들링

2-1. 제일 상위의 js파일(index.js)에 CSS 파일 불러오기

2-3. css-loader, style-loader 설치

webpack은 JavaScript와 CSS를 함께 배포해야 할 때, 좀 더 쉽게 배포할 수 있게 로더(loader)를 제공한다.
css-loader는 CSS를 JS파일 내에서 불러올 수 있게 해주고, style-loader는 불러온 CSS를 style요소 내에 담아주는 역할을 한다. npm으로 css-loader와 style-loader를 설치한다.

npm i -D css-loader style-loader

2-4. webpack.config.js에 로더 설정

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,  // 파일명이 .css로 끝나는 모든 파일에 적용
        // 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
        // 순서 주의 : 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
        use: ["style-loader", "css-loader"],
        // loader가 node_modules 안의 있는 내용도 처리하기 때문에
        // node_modules는 제외해야 한다.
        exclude: /node_modules/,
      },
    ],
  },
};

2-5. js파일 번들링 하기

두 로더 설치와 webpack.config.js 설정을 한 후 다시 번들링 한다.

3) HTML 파일 번들링

3-1. html-webpack-plugin 플러그인 설치

플러그인은 로더처럼 자바스크립트 파일로 불러오는 작업은 아니지만, 번들링에 유용한 다양한 툴을 적용할 수 있다.

npm i -D html-webpack-plugin

3-2. webpack.config.js에 플러그인 설정

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')  // <- 플러그인 불러오기 

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "app.bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "src", "index.html")
    })]
};

3-3. js파일 번들링 하기

플러그인 설치와 webpack.config.js 설정을 한 후 다시 번들링 하면, 아래와 같이 src/index.html 파일을 번들링하여 dist/index.html 파일을 새로 생성한 것을 볼 수 있다.

CSS는 app.bundle.js 파일에서 넣어주고, JavaScript는 html-webpack-plugin이 자동으로 <script defer="defer" src="app.bundle.js"></script> 스크립트 요소를 추가해준 모습을 볼 수 있다.