Webpack

자바스크립트 기반의 모듈 번들러이다.
웹 어플리케이션 개발에 필요한 다양한 요소(HTML, CSS, Javascript, Images등...)들을 하나의 파일로(혹은 여러 개의 파일로) 모두 모아 한 곳으로 투입시켜주는 역할을 한다.

1. Webpack 설치

termial에서 webpack 설치

//npm 시작
npm init -y

//webpack설치
npm npm i -D webpack webpack-cli webpack-dev-server@next

package.json 에서 scripts 추가

 "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build" : "webpack --mode production"
  },

scripts의

dev 개발환경에서 확인하는 모드
build 실배포에 해당되는 모드

devDependecies 의

webpack webpack자체의 버전
webpack-cli parcel module과는 달리 webpack은 이 commend를 사용하기위해 자동적으로 인식하지않아 직접 지정해줘야한다.
webpack-dev-server webpack은 개발환경에서 화면 새로고침을 따로 지정해줘야 사용가능하다.

---

2. webpack.config.js (entry, ouput)

webpack운 구성옵션을 따로 지정해줘야한다.
js 디렉토리가 아닌, 루트 폴더안에 바로 생성해 지정한다.

//import의 개념
const path = require('path') 
const HtmlPlugin = require('html-webpack-plugin')

//export
module.exports = {
  	//파일을 읽어들이기 시작하는 진입점 설정
    entry : './js/main.js',
 
    //결과물(번들)을 반환하는 설정
    output : {
        //filename : 'main.js',
        clean : true
    },
  	plugins : {
  		new HtmlPlugin({
  		template : './index.html'
  	})
  }
}

2.1 import의 개념으로 .require

node.js에서 기본적으로 사용가능하게 하는 전역모듈 path를 .require메서드로 가져옴
이를 변수에 담아 아래 output에서 사용한다.

2.2 export

그래서 어디로 결과물을 만들어낼지
entry
파일을 읽어들이기 시작하는 진입점 설정
webpack번들러가 어디서 부터 읽어들이면 되는지. html이 아닌 js를 기준으로 한다.

output
path는 node.js에서 사용하는 절대경로로 지정해줘야한다.
path : path.resolve(__dirname,'dist')
.resolve(1,2) : 1과 2의 경로를 합쳐주는 매서드.
__dirname node.js에서 사용가능한 전역모듈, 현재 파일이 있는 경로를 지칭한다.
한마디로 node.js에서 제공하는 현재 경로와 dist에있는 파일경로를 합쳐 path로 지정해준 것.
위의 경우는 plugin을 써서 html에 output하겠다는 내용이다.

---

2.3 plugins

output을 할 때 플러그인을 써서 출력시킬 수 있다.
플러그인을 가져올 땐, 마찬가지로 절대 경로로 지정해줘야하기에
위에서 .require함수로 변수에 할당해 사용한 것.

https://webpack.js.org/
공식 문서를 보면, entry를 여러개 지정할 수도 있고 out의 다양한 용법등을 확인할 수 있다.

2.3.1 정적파일 연결하기

//import
const copyPlugin = requure('copy-webpack-plugin')

plugins : {
  		new HtmlPlugin({
  			template : './index.html'
  		}), 
        new copyPlugin({
        	patterns :[
              {from : 'static'}
            ]
        }) 
  }

파일내에서 사용되는 이미지와 같은 정적인 파일들을 import해주는 개념으로 사용.

---

2.4 module

css파일을 import해서 사용하려면 어떻게 해야할까?
node.js환경은 js를 기반으로 불러오기에 따로 css를 읽어들일 수 있는 모듈을 설치해줘야한다.

 npm i -D css-loader style-loader 

css-loader css를 불러와주는 모듈,
style-loeader 불러온 css를 html문서에 style로서 출력시켜주는 모듈.

 module: {
        rules: [
            {
                test:'/\.css$/',  //.css 확장자인 모든 파일을 매칭해서 사용할 건데
                use: [  //그게 내가 설치한 이 모듈이다.
                    'style-loader',  
                    'css-loader'  
                ]
            }
        ]
    }

그리고 js파일에서 css파일을 import해둔다.

import '../css/main.css';

2.4.1 만약 css가 아닌 scss라면?

 npm i -D scss-loader sass

 module: {
        rules: [
            {
                test:'/\.s?css$/',  //s가 있을수도, 없을수도 (.scss || .css)
                use: [  //그게 내가 설치한 이 모듈이다.
                    'style-loader',  
                    'css-loader,
                  	'sass-loader'
                ]
            }
        ]
    }

2.4.2 prefix 자동으로 붙여주는 패키지

terminal

 npm i -D postcss autoPrefixer postcss-loader

webpack.config.js

 module: {
        rules: [
            {
                test:'/\.s?css$/',  
                use: [  
                    'style-loader',  
                    'css-loader,
                  	'postcss-loader' //autoPrefixer 추가
                  	'sass-loader'
                ]
            }
        ]
    }

package.json - browserlist내용 추가해준다.

{
  "name": "fc_workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.0.0-rc.1"
  },
  "browserlist":[  //browserlist내용 추가
    ">1%",
    "last 1 versions"
  ]
}

루트폴더안에 .postcssrc.js생성

module.export = {
    plugin : [
        require('autoprefixer')
    ]
}

2.4.3 babel

.babelrc.js 생성, 구성옵션 작성

module.exports = {
    presets : ['@babel/preeset-env'],
    plugins : [
        ['@babel/plugin-transform-runtime']
    ]
}

webpack.config.js

 module: {
        rules: [
            {
                test:'/\.s?css$/', 
                use: [  
                    'style-loader',  
                    'css-loader' ,
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test : /\.js/,
                use : [
                    'babel-loader'
                ]
            }
        ]
    }

terminal

npm i -D babel-loader

---

3. Netlify로 배포시키기

Build command : npm run build
Publish directory : dist/
로 배포시의 명령어와 폴더명 한번 더 확인할 것.

---

4. npx , digit

git에 올려둔 탬플릿을 버전관리 하지않고 그대로 내 로컬에 다운받을 수 있게한다.
만약, 이게 없었다면 git에서 압축파일 받아서 폴더에 복붙했을 것.

npx degit [저장소경로이름] [다운받은 내용을 담을 폴더명]

npx
node.js를 설치하고 npm이 자동적으로 설치된 것 처럼, npx도 동일하다.
degit은 git에 있는 정보를 끌고올 때 사용하는 기능인데 이를 사용하려면 실제로 설치해야한다. npx는 직접 설치하지않아도 사용가능하게끔 해주는 기능이다.
degit
git에 있는 원격의 저장소를 다운로드 받을 수 있게한다.

💡git clone과 뭐가 다른가?
git clone으로 원격저장소내의 파일들을 끌고오면 말그대로 복제,
기존 버전관리된 이력까지 모두 끌고온다.
하지만 npx degit으로 끌고온 경우 버전관리 이력은 가져오지않고
파일만 가져올 수 있다. 때문에 같은 탬플릿은 유지하되, 새로운 프로젝트를 시작하려 할 때
활용할 수 있다.