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

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
반응형

티스토리툴바