Bundler

: 외부 패키지 연결하기 위한 설정.

Parcel

: 구성이 없는 단순한 자동 번들링

• 소/중형 프로젝트에 적합

ico converter

• 자동으로 dist에 필요한 파일을 copy 하여 넣어주는 패키지 사용!

npm install -D parcel-plugin-static-files-copy

• package.json에 추가

"staticFiles":{
    "staticPath": "static"
  }

-static 폴더 만들고 favicon.ico 넣어주기

bander prefix ( autoprefixer )

npm i -D postcss

npm i -D autoprefixer

postcss.config.js 수정하기

module.exports = {
  plugins: [
    require("autoprefixer")({
      browsers: ["> 1%", "last 2 versions"],
    }),
  ],
}
;

BABEL

: ECMAScript 의 이전 버전을 이용해도 적용할 수 있도록하는 컴파일러.

@babel/core @bable/preset-env

설치

.babelrc.js 만들고

module.exports = {
  presets: ["@babel/preset-env"],
};

parcel options

브라우저에서 열기

: 기본값 비활성

parcel index.html --open

Webpack

: 매우 꼼꼼한 구성

• 중/대형 프로젝트에 적합

npm i -D webpack webpack-cli webpack-dev-server@next

• package.json script 설정

"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"

• webpack.config.js 파일을 만들고 설정

entry

• 진입점 설정.

output

• path 결과물 반환 디렉토리 설정 ( 위치는 절대 위치로 )

• webpack.config.js

// 절대경로 설정
const path = require("path");

module.exports = {
  entry: "./js/main.js",
  output: {
    // path 는 절대 경로로 설정해야한다.
    // 기본 설정.
    // path: path.resolve(__dirname, "dist"),
    // filename: "main.js",
    clean: true,
  },
};