Plugin의 도입

SPANKEEE·2022년 1월 4일

webpack 번들 번들링 웹팩

웹팩

목록 보기

6/7

웹팩에는 두가지 형태의 확장 기능이 있다.

로더 : 우리가 갖고 있는 모듈을 output을 거치는 과정을 사용되는 기능

플러그인 : 로더를 통해 최종적인 결과물을 변형한다.

플러그인을 사용하면 더욱 복합적으로 자유롭게 제작할 수 있다.
html파일을 일종의 템플릿으로 만들고 싶다. 그럴때 사용한다.

html-webpack-plugin 설치

일단 플러그인을 설치해보자 아래의 명령어를 입력해 "html-webpack-plugin"를 설치한다.

npm i -D html-webpack-plugin

{
  "name": "template_wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

pakage.json

pakage.json에 "html-webpack-plugin"플러그인이 설치된 것을 확인할 수 있다.

html파일 source로 이동

이전에 작성한 html 파일들을 source폴더로 이동시킨다.
html내에 자바스크립트를 불러오는 태그를 모두 지워준다.

<!-- <script src="public/번들링된_자바스크립트_bundle.js"></script> -->

웹팩을 통해 번들링된 결과물이 최종적으로 public폴더 내에 만들어 지도록 해보자

설정파일 webpack.config.js 수정

const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
// html 웹팩 플러그인을 직접 실행 시키기 위해 가져온다

module.exports = {
    mode: "development",
    //개발
    entry: {
        // 여러 자바스크립트를 나열
        index : "./source/index.js",
        about : "./source/about.js"
    },
    // 도입할 .js 위치
    output: {
        path: path.resolve(__dirname,"public"),
        // dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
        filename: '[name]_bundle.js'
        // 번들링 될때 파일 명을 해당 entry의 이름에 맞게 번들링 해준다.
    },
    module: {
        rules:[
            // 모듈을 처리하는 규칙 
            {
                test: /\.css$/,
                // 웹팩을 통해서 가공하는 여러가지 데이터중 CSS확장자 파일 처리하는 방식을 알려주고 싶다
                use: ['style-loader', 'css-loader']
                // 웹팩을 동작시켰을때 확장자가 CSS인 파일을 만나면 웹팩이 알아서 해당 CSS파일을 웹팩 안으로 로드시켜준다.
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
             template: './source/index.html',
             filename: './index.html'
         })
    ]
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
를 추가시켜 주고 모듈 객체 다음에 plugins 배열을 추가한다.

그리고 plugins 배열 안에 new HtmlWebpackPlugin({... 안에

template : 기본적인 템플릿이 될 파일
filename : 최종적으로 만들어질 파일명

위 내용들을 추가해 준다.

웹팩 실행시키기

일단 제대로 작동되는 것을 확인하기 위해 public 폴더 내에 있는 모든 파일들을 지워준다.

그다음 웹팩을 실행시켜 본다.

npx webpack

실행시킨 후 public 폴더를 열어보면 해당 폴더에 index.html 파일도 번들링 된 것을 확인할 수 있다.

실행 시키고 나서 index.html파일을 라이브 서버로 열어보자

<html><head><script defer src="index_bundle.js"></script><script defer src="about_bundle.js"></script></head>
    <body>
        <h1>Hello webpack! | index</h1>
        <div id="root"></div>
        <a href="./about.html">go to about</a>
    </body>
</html>

index.html 구조

그러나 about 페이지로 들어가면 오류가 뜬다.

그리고 번들링된 자바스크립트 두파일을 모두 사용함으로써 무언가가 잘못되어 있다.

설정파일 webpack.config.js 재설정

const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
// html 웹팩 플러그인을 직접 실행 시키기 위해 가져온다

module.exports = {
    mode: "development",
    //개발
    entry: {
        // 여러 자바스크립트를 나열
        index : "./source/index.js",
        about : "./source/about.js"
    },
    // 도입할 .js 위치
    output: {
        path: path.resolve(__dirname,"public"),
        // dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
        filename: '[name]_bundle.js'
        // 번들링 될때 파일 명을 해당 entry의 이름에 맞게 번들링 해준다.
    },
    module: {
        rules:[
            // 모듈을 처리하는 규칙 
            {
                test: /\.css$/,
                // 웹팩을 통해서 가공하는 여러가지 데이터중 CSS확장자 파일 처리하는 방식을 알려주고 싶다
                use: ['style-loader', 'css-loader']
                // 웹팩을 동작시켰을때 확장자가 CSS인 파일을 만나면 웹팩이 알아서 해당 CSS파일을 웹팩 안으로 로드시켜준다.
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
             template: './source/index.html',
             filename: './index.html',
             chunks : ['index']
         })
    ]
}

filename 밑에 chunks를 추가 시키고 ['index'] 를 적는다.

다시 웹팩 실행
npx webpack

실행결과 index.html 내부구조

이렇게 우리가 원하는 js파일만 불러오는 것을 확인할 수 있다.

하지만 우리는 하나의 페이지가 아닌 여러 페이지를 만들기 때문에 다시 설정파일을 수정한다.

설정파일 webpack.config.js 수정

const path = require('path');
// 파일의 경로를 쉽게 핸들링 해줄 수 있게 도와주는 일종의 부품이라 생각한다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
// html 웹팩 플러그인을 직접 실행 시키기 위해 가져온다

module.exports = {
    mode: "development",
    //개발
    entry: {
        // 여러 자바스크립트를 나열
        index : "./source/index.js",
        about : "./source/about.js"
    },
    // 도입할 .js 위치
    output: {
        path: path.resolve(__dirname,"public"),
        // dist 라는 하위 경로에 최종적인 경과물을 "public"에 놓아라
        filename: '[name]_bundle.js'
        // 번들링 될때 파일 명을 해당 entry의 이름에 맞게 번들링 해준다.
    },
    module: {
        rules:[
            // 모듈을 처리하는 규칙 
            {
                test: /\.css$/,
                // 웹팩을 통해서 가공하는 여러가지 데이터중 CSS확장자 파일 처리하는 방식을 알려주고 싶다
                use: ['style-loader', 'css-loader']
                // 웹팩을 동작시켰을때 확장자가 CSS인 파일을 만나면 웹팩이 알아서 해당 CSS파일을 웹팩 안으로 로드시켜준다.
            }
        ]
    },
    plugins: [
         new HtmlWebpackPlugin({
             template: './source/index.html',
             filename: './index.html',
             chunks : ['index']
         }),
         new HtmlWebpackPlugin({
            template: './source/about.html',
            filename: './about.html',
            chunks : ['about']
        })
    ]
}

플러그인 plugins: 객체 안에 개입할 부분을 다시 설정한다.

다시 웹팩 실행
npx webpack

실행 결과 public 폴더

여기서 about.html 파일도 추가된 것을 확인할 수 있다.

about.html 파일 구조

자기가 원하는 자바스크립트만 사용된 것을 확인할 수 있다.

SPANKEEE

해야되요

이전 포스트

output 설정하기

다음 포스트

Plugin의 도입

웹팩

output 설정하기

웹팩 실시간으로 확인하기

0개의 댓글