Modules

---

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

---

1. import & export 기본 문법

---

• export : 특정 파일에서 쓸 변수, 함수 등을 내보내는 문법 익스포트한 대상은 다른 파일에서 import 를 통해 사용 가능

export 변수, 함수

• import : export 된 변수 혹은 함수를 사용할 경우

import { export 한 변수, 함수 명 } from '파일 경로';

1-1. exportExam.js

---

export function sum(a, b) {
  return a + b;
}

1-2. importExam.js

---

import { sum } from "./exportExam";
console.log("10 + 20 = ", sum(10, 20));

import 하여 사용할때 상대경로를 잘 맞게 썼는지 항상 주의하자

2. Webpack 으로 돌려보기

---

앞에서 기록한것과 같이 우리가 웹팩을 빌드 할 경우 package.json 에 scripts 에 선언이 되어 있어야 한다.

npm run build

를 쳤을때 동작하는 건 webpack 이고 우리가 정의한 webpack.config.js 에서 구성한대로 build 가 실행된다.

2-1. webpack.config.js

---

var path = require("path");

module.exports = {
  mode: "production",
  // production 의 경우 난독화 되어 나옴
  // mode: 'none', 으로 진행할 경우 bundle 소스를 확인 가능
  entry: "./js/app.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "main.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: "source-map",
  // source-map 을 통해 build 한 결과물(난독화)과 빌드 전 결과물을 비교할 수 있게 해준다.
};

build 를 진행하게 되면

하지만, 우리가 console 을 찍었을때 해당 js 페이지가 난독화 전 결과물을 보고 싶은 경우가 있다.

예를 들어

클릭 시 실제 app.js 의 함수를 보고 싶을때가 있는데 이럴때는 webpack config 에 devtool 을 추가하여 해결할 수 있다.

devtool: "sourceMap";