[Webpack] ๊ธฐ๋ณธ ๊ตฌ์„ฑ ๋ฐฉ๋ฒ•(๋ฒˆ๋“ค๋ง ํŠœํ† ๋ฆฌ์–ผ)

2020. 6. 30. 22:42ยทLanguages/JavaScript
๋ชฉ์ฐจ
  1. ์›นํŒฉ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  2. ๊ฐœ๋ฐœ์— ์‚ฌ์šฉ๋œ ๊ฐœ๋ฐœ ๋„๊ตฌ๋Š” vsCode์ž…๋‹ˆ๋‹ค.
  3. vsCode์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  4. ์ด๋ฒˆ ์„ค๋ช…์—์„œ ์‚ฌ์šฉ๋  ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค ์ž…๋‹ˆ๋‹ค.
  5. ๋งŒ์•ฝ ์˜ค๋ฅ˜๊ฐ€ ๋‚œ๋‹ค๋ฉด ์•„๋ž˜ ๋Œ“๊ธ€๋กœ ๋ฌธ์˜์ฃผ์‹œ๋ฉด ๋‹ต๋ณ€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์›นํŒฉ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

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
  1. ์›นํŒฉ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  2. ๊ฐœ๋ฐœ์— ์‚ฌ์šฉ๋œ ๊ฐœ๋ฐœ ๋„๊ตฌ๋Š” vsCode์ž…๋‹ˆ๋‹ค.
  3. vsCode์— ๋Œ€ํ•œ ์„ค๋ช…์€ ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
  4. ์ด๋ฒˆ ์„ค๋ช…์—์„œ ์‚ฌ์šฉ๋  ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค ์ž…๋‹ˆ๋‹ค.
  5. ๋งŒ์•ฝ ์˜ค๋ฅ˜๊ฐ€ ๋‚œ๋‹ค๋ฉด ์•„๋ž˜ ๋Œ“๊ธ€๋กœ ๋ฌธ์˜์ฃผ์‹œ๋ฉด ๋‹ต๋ณ€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.
'Languages/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [javascript] object ๋‚ด์— json string์„ object๋กœ ๋ณ€ํ™˜
  • [Nodejs] NPM ์„ค์น˜๋œ ํŒจํ‚ค์ง€ ๋ฆฌ์ŠคํŠธ ํ™•์ธ
  • [vue.js] v-if์™€ v-show์˜ ์ฐจ์ด์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ๊ตฌ๋ถ„
  • ECMAScript/ES ์ด๋ž€?
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
์ผ์ƒ, ๊ฒŒ์ž„, ๋ง›์ง‘, ์—ฌํ–‰, ๊ฐœ๋ฐœ, IT ๋ธ”๋กœ๊ทธ๐Ÿงž
  • ์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
    ์š”์ˆ  ๋žจํ”„๐Ÿซ–
    ์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • All (549)
      • Languages (57)
        • JAVA (13)
        • JSP (1)
        • C_C++ (4)
        • Html (3)
        • CSS (1)
        • JavaScript (18)
        • Python (3)
        • Kotlin (13)
        • TypeScript (1)
      • Framework (14)
        • spring (11)
        • jstl (1)
        • angular (2)
      • Tool (28)
        • Eclipse (5)
        • vsCode (3)
        • scrcpy (2)
        • Git (1)
        • IntelliJ (6)
        • Visual-studio (1)
        • UML (1)
        • Gradle (8)
      • DB (6)
        • Oracle (1)
        • MySql (3)
        • Mongo (2)
      • OS (14)
        • Linux (2)
        • Windows (12)
      • Server (8)
        • Tomcat (1)
        • Apache (1)
        • Node.js (6)
      • Programmings (25)
        • Design Pattern (2)
        • Funny (20)
        • Algorithms (3)
      • Cloud (8)
        • Docker (1)
        • Kubernetes (4)
        • Istio (1)
        • ArgoCD (2)
      • IT (5)
        • gRPC (3)
        • RESTful (3)
        • Web UI (5)
        • AI (4)
      • Book (6)
      • TIP (187)
      • Life (53)
      • Game (83)
      • Storage (22)
      • ์‹๋‹น (15)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
    • ์‚ฌ์ดํŠธ๋งต
    • RSS
    • ๊ธฐํƒ€ ์†Œ๋“
  • ๋งํฌ

    • ๊ตฌ๊ธ€
    • ๋„ค์ด๋ฒ„
    • ์ •๋ถ€24
    • Spring Framework ๋ฆด๋ฆฌ์ฆˆ ๋…ธํŠธ
    • Kotlin ๋ฆด๋ฆฌ์ฆˆ ๋…ธํŠธ
    • ์นด์นด์˜ค ์• ๋“œํ•
    • ๋ธ”๋กœ๊ทธ ์‚ฌ์ดํŠธ๋งต
    • ๋ธ”๋กœ๊ทธ RSS
  • ๊ณต์ง€์‚ฌํ•ญ

    • ์•ˆ๋…•ํ•˜์„ธ์š”
  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    ๋ธŒ๋ฆฌํ•‘
    ๋ชฌ์Šคํ„ฐํ—Œํ„ฐ๋‚˜์šฐ
    ์˜ค๋Š˜์˜๋‰ด์Šค
    ํ•œ๋ˆˆ์— ๋ณด๋Š” ์˜ค๋Š˜์˜ ๋‰ด์Šค
    ํƒœ๊ตญ
    ๋‰ด์Šค
    ๋ชฌ์Šคํ„ฐํ—Œํ„ฐ์™€์ผ์ฆˆ
    ๋‰ด์Šค ๋ธŒ๋ฆฌํ•‘
    ๋ฐ์ผ๋ฆฌ ๋‰ด์Šค
    ํ€˜์ŠคํŠธ
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
์ง€๋‹ˆ๐Ÿงžโ€โ™‚๏ธ๐Ÿฅญ
[Webpack] ๊ธฐ๋ณธ ๊ตฌ์„ฑ ๋ฐฉ๋ฒ•(๋ฒˆ๋“ค๋ง ํŠœํ† ๋ฆฌ์–ผ)

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.