웹팩 맛보기

웹팩을 간단하게 맛볼 수 있는 튜토리얼을 진행해보겠다.

개발 환경 구성

Node.js 버전 10 이상
NPM 버전 6 이상

웹페이지 구성

package.json 파일 생성

npm init -y

웹팩 관련 라이브러리 설치

npm i webpack webpack-cli -D
npm i lodash

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>
  </body>
</html>

src/index.js 파일 생성

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());

웹팩 빌드 구성 및 빌드

빌드를 위한 파일 내용 반영

// 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());

<!-- 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>

package.json 파일에 스크립트 추가

"scripts": {
  "build": "webpack --mode=none"
}

npm run build 실행 후 index.html파일을 vsc의 liver server extension으로 실행
프로젝트 루트 폴더에 webpack.config.js 파일 생성 후 내용 추가

// webpack.config.js
// `webpack` command will pick up this config setup by default
var path = require("path");

module.exports = {
  mode: "none",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
};

package.json 스크립트 수정

"scripts": {
  "build": "webpack"
}

npm run build 실행 후 빌드가 잘 되는지 확인