webpack-1

npm : js의 모든 라이브러리 공개 저장소 , 자바스크립트 라이브러리들을 다운받기가능

npm init : npm 초기화
npm init -y 사용해서 세팅값 설정한걸 바로 불러옴

npm install
npm uninstall

npm install --global : 전역설치 시스템 레벨에서 사용할 자바스크립트 라이브러리를 설치할 때 사용함
npm install -g

npm install vue --save-dev
npm i vue -D

배포용 라이브러리와 개발용 라이브러리

dependencies

• 애플리케이션의 로직과 연관 , 화면의 로직과 직접적으로 연관됨
• 뷰 리액트 앵귤러 제이쿼리 차트 등

devDependencies 의 구분

• 웹팩 , js컴프레션 , sass 개발보조 라이브러리

개발용 라이브러리는 build할때 포함되지 않는다

webpack -
모듈 번들러 (html, css, js, images)등을 각각의 모듈로보고
병합된 하나의 결과물을 만드는 도구

npm init -y
npm i webpack webpack-cli -D
npm i lodash

index.html
src/index.js 를 생성

webpack.config.js 를 생성

var path = require('path');

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

webpack.config.js 파일을 통해 웹팩 설정가능

entry에 있는 파일을 돌려서 결과물을 output에 만들어주기

path로 경로잡음 dirname 현재 폴더 주소 기준으로 dist 를 생성함

main.js는 IIFE 익명함수 ,
즉시실행함수로 실행됨

(funtion() {
	})()

entry : 빌드를 할 대상 파일을 정의함
빌드, 변환, 컴파일, 번들링
파일의 경로를 정의

output : 빌드의 결과물을 정의
웹팩을 돌리고 난 결과물의 파일 경로

output 파일이름앞 [name][chunkhasg]등을 사용할때 고유 값들을 붙여주는 방법사용이 있음
publicPath = cdn과 관련있음

module : 엔트리에서 아웃풋으로 변환할 때 개입
rules안에 정의

loader : 비 자바스크립트 파일을 자바스크립트에서 인식시켜주는
css html등의 파일을 entry의 index.js로 집어넣어주는 ? 느낌
오른쪽에서 왼쪽 순서로 적용이 됨
scss

test:/\.scss$/,
use: ['style-loder', 'css-loader', 'sass-loader']

mode: production(배포) development(개발) none
세가지 모드가 있다.

웹팩 dev서버
빌드 대상 파일이 변경되었을떄 웹팩 명령어를 실행하지 않아도 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줌