1. 기본적인 설치를 위해서

웹팩을 설치하기 위해서
해당 프로젝트를 node.js의 패키지 프로젝트로 만들어보자
npm 설치

<!--현재 디렉토리를 node.js의 프로젝트 폴더로 선언-->
<!--package.js 설치됨. 중요-->
npm init

<!--"-D"는 devDependencies 에 설치되는것 = "--save-dev"
개발을 하기위한 옵션을 설치할때 사용 -->
npm install -D webpack webpack-cli

<!--Webpack으로 
source폴더의 index.js 를 entry(시작점)으로 삼아서 
public폴더의 index_bundel.js의 파일이름으로
output(출력) 하고싶을때-->
npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js

<!--그냥 "--output" 으로 했을땐 오류가 났었다. 버전이슈인듯-->

파일 생성이 된걸 확인해 보자
추가로 출력할 html 파일에서 script 안에 index_bundle.js를 불러와주면 완성!

2. Webpack의 흐름

출처 : 생활코딩

왼쪽에 있는 여러가지 자원들(실제 코딩할때 만들어지는) : INPUT
을 어떻게 가공해서(Webpack으로) : PROCESS
단순한 형태의 몇몇파일로 만들어지는 : OUTPUT

3. Webpack.config.js

참고사이트:webpack

webpack.config.js 파일을 만들어서 관리해보자

const path = require("path");

module.exports = {
  entry: "./source/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "index_bundle.js",
  },
};

webpack.config.js 파일안에 위의 내용은

npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js

터미널에서의 해당 명령어와 동일하다.

<!--webpack.config.js 실행-->
npx webpack --config webpack.config.js
<!--파일 이름이 webpack.config.js라면 --config~~생략가능-->
npx webpack