[HTML] 웹팩 실습 (HTML)

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

웹팩 실습

웹팩 이전

다음과 같이 js 파일을 3개로 만들었습니다.

a.js

let number = 100

b.js

let number = 200

c.js

let number = 200

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="src/a.js"></script>
    <script src="src/b.js"></script>
    <script src="src/c.js"></script>
</head>
<body>
    <script>
        console.log("number : ",number)
    </script>
</body>
</html>

html을 실행하면 다음과 같은 출력을 얻습니다

number은 a, b, c 모두 존제하기 때문에 이미 정의 도어있다는 Syntax오류를 반환합니다,

만약 각각의 js 파일에서 number을 let이 아닌 var로 선언했을 경우 가장 마지막 c.js의 300이 출력되고 에러가 발생하지 않습니다

이번에는 각각의 js 파일을 import하여 가져오겠습니다.

a.js

let number = 100
export default number

b.js

let number = 200
export default number

c.js

let number = 300
export default number

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="module">
        import number from '/src/a.js'
        import number from '/src/b.js'
        import number from '/src/c.js'
        console.log("number : ",number)
    </script>
</body>
</html>

import한 값이 모두 number라는 공통되 변수명을 갖고 있어 오류가 발생합니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="module">
        import number_a from '/src/a.js'
        import number_b from '/src/b.js'
        import number_c from '/src/c.js'
        console.log("number_a : ",number_a)
        console.log("number_b : ",number_b)
        console.log("number_c : ",number_c)
    </script>
</body>
</html>

network tab에서 시간이 얼마나 걸렸는지 확인해 보겠습니다

time을 통해 각각의 파일을 가져오고 있음과 각각의 파일마다 걸리는 시간을 확인할 수 있습니다

만약 js파일이 3개가 아니라 6개 9개 ...100개일 경우 하나하나 파일을 가져오는 시간은 더 증가될 것입니다.

a.js를 a_1.js와 a_2.js에서 가져 오는 값을 더하고 그 값을 내보내도록 만들겠습니다.

a_1.js

let number = 40
export default number

a_2.js

let number = 60
export default number

a.js

import num1 from './a_1.js'
import num2 from './a_2.js'
let number = num1+num2
export default number

이전보다 시간 소요가 증가함을 알수 있습니다.

기능 추가 및 웹팩 사용 준비

이제 모듈화 했던 파일들을 하나로 보내는 방법에 대해 알아 보겠습니다.

우선 기존 index.html은 각각의 파일들을 import했던 기능을 지우고, src파일에서 index.js라는 자바스크립트를 받도록 하겠습니다. 그리고 src폴더에 index.js라는 파일을 생성하겠습니다

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module" src="src/index.js">
</script>
</body>
</html>

/src/index.js

import number_a from './a.js'
import number_b from './b.js'
import number_c from './c.js'
console.log("number_a : ",number_a)
console.log("number_b : ",number_b)
console.log("number_c : ",number_c)

기존과 동일한 출력을 보여줍니다.

추가적인 기능을 부여하겠습니다.

index.html은 number_a,number_b,number_c를 나타내는 버튼이 있고, 해당 버튼을 누르면 해당 값이 div에 출력되게 만들겠습니다.

index.js는 각각의 값을 받아와 기능을 할수 있도록 만들겠습니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module" src="src/index.js"></script>
<button type="button" id="btn_a">number_a</button>
<button type="button" id="btn_b">number_b</button>
<button type="button" id="btn_c">number_c</button>
<div id="display"></div>
</body>
</html>

/src/index.js

import number_a from './a.js'
import number_b from './b.js'
import number_c from './c.js'
console.log("number_a : ",number_a)
console.log("number_b : ",number_b)
console.log("number_c : ",number_c)

const btnA = document.querySelector('#btn_a')
const btnB = document.querySelector('#btn_b')
const btnC = document.querySelector('#btn_c')
const display = document.querySelector('#display')

btnA.addEventListener("click",()=>{
    display.textContent = number_a
})
btnB.addEventListener("click",()=>{
    display.textContent = number_b
})
btnC.addEventListener("click",()=>{
    display.textContent = number_c
})

작동이 정상적으로 잘 됩니다.

웹팩

웹팩 사용전에 npm으로 관리를 해야하기 때문에 npm init을 하겠습니다.

$ npm init -y

웹팩을 설치 하겠습니다.

실제 프로젝트에서 사용하지 않을것이기 때문에 devDependency로 옵션을 설정합니다.

$ npm install -D webpack webpack-cli

번들링을하겠습니다.

실행중인 폴더에 webpack.config.js파일을 생성했습니다.

어떤 entry를 번들링할지, 또 어떤 output을 갖을지 적습니다.

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
        filename: 'app.bundle.js',
    },
};

이후 npm webpack을 터미널에 입력합니다.

$ npx webpack

asset app.bundle.js 426 bytes [emitted] [minimized] (name: main) orphan modules 257 bytes [orphan] 5 modules ./src/index.js + 5 modules 889 bytes [built] [code generated] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

다음에러가 발생하여 mode: 'development'를 추가 했습니다.

module.exports = {
    mode:'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다.
        filename: 'app.bundle.js',
    },
};

html의 경로를 index.js에서 ./dist/main.js로 변경하겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module" src="./dist/main.js"></script>
<button type="button" id="btn_a">number_a</button>
<button type="button" id="btn_b">number_b</button>
<button type="button" id="btn_c">number_c</button>
<div id="display"></div>
</body>
</html>

기존과 같은 기능을 합니다.

기존과 비교해 더 적은 js파일을 가져오고 더 적은 시간이 소요됨을 알수 있습니다.

npm run build

package.json의 script에 "build": "webpack"을 추가하면 npm run build로 쉽게 웹 팩을 만들수 있다

$ npm run build

강의

https://www.youtube.com/watch?v=NGVc-zw2FG8

저작자표시 (새창열림)

'프론트엔드 > Codestates' 카테고리의 다른 글

[React] useMemo (0)	2022.11.25
[React] Virtual DOM (0)	2022.11.25
[React] 번들링 웹팩 (0)	2022.11.23
[HTML/CSS] 반응형 웹 (0)	2022.11.21
[HTML/CSS] 브라우저 렌더링 (2)	2022.11.21

웹팩 실습

웹팩 이전

기능 추가 및 웹팩 사용 준비

웹팩

npm run build

강의

'프론트엔드 > Codestates' 카테고리의 다른 글

티스토리툴바