Webpack 1장 (사용법)

KHW·2021년 3월 29일

webpack

다양한 지식쌓기

목록 보기

10/48

Bundler

여러 파일을 묶어주는 역할

ex) Webpack Broserify, parcel

module

사용하는 이유

같은 이름으로 선언된 서로 다른 파일에서 변수 분리가능

해당 파일안의 변수 값은 해당 파일안에서만 유효한 값이 된다.

index.html

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script type="module">
        import hello_word from "./source/hello.js"
        import world_word from "./source/world.js"
        document.querySelector('#root').innerHTML = hello_word + '  ' + world_word;
    </script>
</body>
</html>

hello.js

var word = 'hello';
export default word;

world.js

var word ='world';
export default word;

hello.js에서의 word와 world.js에서 word가 충돌하지않게 서로다른 이름으로 import를 진행한다.

Webpack 사용방법

1) npm init 명령

현재 디렉토리를 node.js의 프로젝트 폴더로 선언해야한다.

Terminal에 npm init => package.json 파일 생성된다.

package.json

{
  "name": "ee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2) npm install -D webpack webpack-cli

webpack과 관련한 내용들을 설치해준다.

Terminal에 npm install -D webpack webpack-cli

package.json

{
  "name": "ee",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0"
  }
}

webpack, webpack-cli가 설치된 것을 알 수 있다.

node_modules 라는 폴더가 따로 생성된다.

module을 위해 index.js로 다시 분리하기

index.html

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script src="./source/index.js" type="module">
       </script>
</body>
</html>

index.js

import hello_word from "./hello.js"
import world_word from "./world.js"
document.querySelector('#root').innerHTML = hello_word + '  ' + world_word;

hello.js

var word = 'hello';
export default word;

world.js

var word ='world';
export default word;

Webpack 명령어 실행하기

npx webpack --entry 대상위치 --output-path 생성위치

ex)

npx webpack --entry ./source/index.js --output-path ./public/inde x_bundle.js : index.js의 파일에 관련한 것들을 합쳐 index_bundle.js에 만들어놓는다.

실행결과

index.html

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <div id="root"></div>
    <script src="./public/index_bundle.js/main.js" type="module">
       </script>
</body>
</html>

main.js

(()=>{"use strict";document.querySelector("#root").innerHTML="hello  world"})();

bundle을 통해 만들어진 main.js를 src로 연결하여 사용하면 index.js , hello.js, world.js내용을 포함한 결과가 똑같이 나타난다.

(생활코딩 강의에서는 npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js이렇게 하면 index_bundle.js가 생성되던데 나는 main.js로 생성되던데 이건 뭐 필요에따라 이름바꾸고 하면 될듯하다. => 일단 Webpack을 성공한것에 만족하자)