webpack@4 - 엔트리/아웃풋

webpack - 엔트리/아웃풋

💡 웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. app.js부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.

webpack 설치

번들 작업을 하는 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.

npm install -D webpack webpack-cli

설치 완료하면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. webpack과 webpack-cli가 있는데 둘 중 하나를 실행하면 된다

$ node_modules/.bin/webpack --help

  --mode <value>                         Defines the mode to pass to webpack.
                                     [선택: "development", "production", "none"]
  --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.
  -o, --output-path <value>              Output location of the file generated by webpack e.g. ./dist/.

--mode, --entry, --output 세 개 옵션만 사용하면 코드를 묶을 수 있다.

$ node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js

• -mode는 웹팩 실행 모드는 의미하는데 개발 버전인 development를 지정한다
  • "development", "production", "none"
• -entry는 시작점 경로를 지정하는 옵션이다
• -output은 번들링 결과물을 위치할 경로다
  • entry를 통해 웹팩의 모든 모듈들을 하나로 합치고 그 결과물을 저장하는 경로

config file 생성

$ node_modules/.bin/webpack --help

  --config               Path to the config file
                         [문자열] [기본: webpack.config.js or webpackfile.js]

이 옵션은 웹팩 설정파일의 경로를 지정할 수 있는데 기본 파일명이 webpack.config.js 혹은 webpackfile.js다.

webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js", // [name]은 entry에서 설정한 key 값 => entry가 여러개일 경우
    path: path.resolve("./dist"),
  },
}

npm custom 명령어 추가

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

npm run build ⇒ NPM은 현재 프로젝트의 node_modules를 검색해 웹팩 명령어를 찾음

webpack - 엔트리/아웃풋

<aside> 💡 웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다. 하나의 시작점(entry point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. app.js부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.

</aside>

webpack 설치

번들 작업을 하는 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.

npm install -D webpack webpack-cli

설치 완료하면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. webpack과 webpack-cli가 있는데 둘 중 하나를 실행하면 된다

$ node_modules/.bin/webpack --help

  --mode <value>                         Defines the mode to pass to webpack.
                                     [선택: "development", "production", "none"]
  --entry <value...>                     The entry point(s) of your application e.g. ./src/main.js.
  -o, --output-path <value>              Output location of the file generated by webpack e.g. ./dist/.

--mode, --entry, --output 세 개 옵션만 사용하면 코드를 묶을 수 있다.

$ node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js

• -mode는 웹팩 실행 모드는 의미하는데 개발 버전인 development를 지정한다
  • "development", "production", "none"
• -entry는 시작점 경로를 지정하는 옵션이다
• -output은 번들링 결과물을 위치할 경로다
  • entry를 통해 웹팩의 모든 모듈들을 하나로 합치고 그 결과물을 저장하는 경로

config file 생성

$ node_modules/.bin/webpack --help

  --config               Path to the config file
                         [문자열] [기본: webpack.config.js or webpackfile.js]

이 옵션은 웹팩 설정파일의 경로를 지정할 수 있는데 기본 파일명이 webpack.config.js 혹은 webpackfile.js다.

webpack.config.js

const path = require("path")

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js",
  },
  output: {
    filename: "[name].js", // [name]은 entry에서 설정한 key 값 => entry가 여러개일 경우
    path: path.resolve("./dist"),
  },
}

npm custom 명령어 추가

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

npm run build ⇒ NPM은 현재 프로젝트의 node_modules를 검색해 웹팩 명령어를 찾음

 

※ 출저

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의