[Webpack] 기본 구성 방법(번들링 튜토리얼)

웹팩에 대한 설명은 아래를 참고하시면 됩니다.

2020/06/30 - [언어/JavaScript] - webpack 이란

webpack 이란

webpack이란, 모듈화한 여러 개의 파일을 모아 주는 번들러입니다. 번들러는 이 외에도 'Rollup'과 'Parcel'이 있습니다. 모듈화한 파일 결합은 단순하게 파일을 결합하는 것이 아니며, 모듈의 의존 상�

codeparadise.tistory.com

개발에 사용된 개발 도구는 vsCode입니다.

vsCode에 대한 설명은 아래를 참고하시면 됩니다.

2020/06/21 - [Tool/vsCode] - [vsCode] vsCode란?

[vsCode] vsCode란?

Visual Studio Code는 가볍고 강력한 소스 코드 편집기로 데스크톱에서 실행되며 Windows, MacOS 및 Linux에서 사용할 수 있습니다. JavaScript, TypeScript, Node.js에 대한 내장된 지원과 함께 제공되며, 다른..

codeparadise.tistory.com

이번 설명에서 사용될 플러그인들 입니다.

webpack
webpack-cli
html-webpack-plugin
html-loader
webpack-dev-server
babel-loader
node-sass
style-loader
css-loader
sass-loader
mini-css-extract-plugin

우선 프로젝트 상위 폴더로 이동합니다.

NPM 설정파일을 생성 해줍니다.

npm init -y

실제 템플릿이 될 폴더를 생성해줍니다.

mkdir src

이번 구성에 필요한 웹팩 플러그인들을 설치해줍니다.


# html loader 웹팩 플러그인 설치 -D는 디펜던시 포함 설치
npm i -D html-webpack-plugin html-loader

# 웹팩 테스트 서버 플러그인 설치
npm i -D webpack-dev-server

# 바벨 설치
npm i -D @babel/core babel-loader @babel/preset-env

# 이미지 파일 읽을 수 있는 플러그인 설치
npm i -D file-loader

# scss, style, css을 읽을 수 있는 플러그인 설치
npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin

src 폴더 내에 index.html을 생성해줍니다. 메인 html이 될 파일입니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <img src="images/a.jpg">
</body>
</html>

src 폴더 내에 index.js 파일을 생성해줍니다. js 메인이 될 파일입니다.


import { bro } from './bro';
import './styles/main.scss'
console.log(bro('Dude'))

src 폴더 내에 images 폴더를 생성하여 이미지를 넣어줍니다. 저는 a.jpg라는 파일을 넣었습니다.

src 폴더 내에 styles 폴더를 생성하여 main.scss 파일을 생성해줍니다.

$bg: red;

body {
    background: $bg;
}

작업 폴더의 루트 최상위 폴더에 webpack.config.js파일을 생성해줍니다.


const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.png|svg|jpg|gif$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

HtmlWebPackPlugin : html 웹팩 플러그인을 불러옵니다.

MiniCssExtractPlugin : css를 js 로 변환해줄 플러그인을 불러옵니다.

rules 내 설정에 대한 설명입니다.

js : 바벨을 적용하는 설정입니다.
html : 파일 압축을 설정합니다. 해당 옵션이 적용되면 메인 js도 자동으로 호출합니다.
png|svg|jpg|gif : 이미지 외 파일들을 호출할 설정을 합니다. 추가로 다른 확장자 파일을 추가하고 싶다면 추가하셔도됩니다.
scss : 스타일 파일을 설정합니다.

use는 해당 파일에 사용할 플러그인을 설정하는겁니다.

plugins 설정은 어떤 파일을 불러와서 어떤 형식으로 생성할지에 대한 설정입니다.

추가로 메인 js에서 참조할 bro.js입니다. 위치는 src 안에 생성했습니다.


const bro = (greeting) => {
    return `${greeting}, bro`
}

export { bro }

그 외 웹팩 빌드 및 개발 서버 구동을 위한 설정을 packge.json에 추가합니다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start:dev": "webpack-dev-server"
  }

복사하기 좋게 텍스트도 넣어뒀습니다.

모든 설정이 끝나면 빌드 후 개발 서버를 구동합니다.


# npm빌드
npm run build

# 웹팩 테스트 서버 구동
npm run start:dev

서버 구동하면 로그에 주소가 나오며 해당 주소를 브라우저로 접속하여 설정이 잘 적용되었는지 확인하시면 됩니다.

필자는는 http://localhost:8081/로 접속했습니다.

서버가 구동하고 있을시 [WDS] Live Reloading enabled. 콘솔로그에 노출됩니다.

서버가 도중에 끊기면 [WDS] Disconnected! 로그가 나타납니다.

만약 오류가 난다면 아래 댓글로 문의주시면 답변 드리겠습니다.

728x90

웹팩에 대한 설명은 아래를 참고하시면 됩니다.

개발에 사용된 개발 도구는 vsCode입니다.

vsCode에 대한 설명은 아래를 참고하시면 됩니다.

이번 설명에서 사용될 플러그인들 입니다.

만약 오류가 난다면 아래 댓글로 문의주시면 답변 드리겠습니다.

티스토리툴바