Webpack 시작하기

:raising_hand: 개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

1. Webpack Start!!

앞선 작업물에서 WebPack 프로젝트를 만들고 NPM 을 통해 환경을 구축하였다.

이제 실제 Webpack을 시작해보도록 한다.

image

1.1. index.js

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());
1.2. index.html

<!-- index.html -->
<html>
    <head>
        <title>Webpack Demo</title>
        <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
    </head>
    <body>
        <!-- <script src="src/index.js"></script> -->
        <script src="dist/main.js"></script>
    </body>
</html>
1.3. package.json

script -> build : “webpack” 추가

{
  "name": "webpack-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
1.4. 빌드 Command

NPM 을 빌드하기 위해선 아래와 같은 command(명령어)를 사용하면 된다.

npm run build

image 결과

image

혹여나 build 를 실행하였을때 위와 같은 Warning 이 발생할 수도 있다.

자세한건 더 공부를 하여 확실해지면 기록에 남기도록 할 예정이나 우선은 위 문장에도 나와 있듯이 mode 옵션이 설정되지 않아서 발생하는 Warning 으로 보인다.

development 혹은 production 으로 목적에 맞게 설정해주어야 하는 것이지만 우선 공부하는 입장에서 none 으로 진행 해보도록 한다.

{
  "name": "webpack-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=none" // none 으로 설정
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  } 
}

2. 실행결과

3 번 package.json 내 build 추가 작업으로 인해서 4번 빌드 npm run build 를 입력하였을때 webpack 이 실행될 수 있다.

<!-- index.html -->
<html>
    <head>
        <title>Webpack Demo</title>
        <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
    </head>
    <body>
        <!-- <script src="src/index.js"></script> -->
        <script src="dist/main.js"></script>
    </body>
</html>

3. 정리

우리가 NPM 을 통해 Build를 실행하고 이때 webpack.config.js 에 script 를 참조하여 webpack 이 실행된다.

index.js 에 작성된 3가지 내용을 담은 스크립트를 웹팩 실행 시 Bundling(Build) 를 실행하게되고

 - lodash 라이브러리 import

 - component function : div 태그 생성 후 text 추가 후 return

 - 렌더링 페이지에 추가

결과 페이지는 dist 폴더 내에 main.js 로 만들어지게 된다.

웹 페이지 호출 시 index.html 에서 script 를 통해 해당 main.js 결과물을 읽어 노출시킨다.

You may also enjoy