개발환경 설정 - Webpack

에디터 설정

• VSCode 에디터

---

기본 브라우저 설정

• 크롬 브라우저

---

모듈 번들러란?

• 웹 개발에 필요한 자원 (HTML, CSS, JS, Image 등등 ) 을 모두 각각의 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만들어주는 도구

---

웹팩 (WebPack) 이란?

• 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러
• 최종 배포용 파일을 만들어줌
• <script> 태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런 것도 WebPack이 해준다.
• 사용 이유에 대해서는 참고

---

웹팩 설치 방법

• 새로운 폴더를 생성한다
• 폴더에서 터미널을 열어 아래의 코드를 입력해 package.json 을 초기화해준다.

npm init -y 

• package.json 파일이 생성된 것을 확인한다.
• 아래의 코드를 터미널에 입력해 웹팩을 설치해준다.

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

• • 만약에, package.json 에서 업데이트 된 버전을 다시 설치하고 싶다면?
    • 버전을 다르게 설치하고 싶은 패키지의 키 값에 수정 버전을 입력한다.
    • 터미널에 npm i 를 입력해주면 수정된 버전으로 다시 설치가 된다.
  • -D 를 입력하는 이유?
    • devDependencies 라는 의미
    • 로컬 개발이나, 테스트를 위한 패키지를 뜻함.

---

웹팩 사용 방법

• src 폴더를 만들어준다.
  
  • src 폴더 안에 구성
    • css 폴더 / style.css
    • js 폴더 / index.js
• package.json 이 있는 폴더에 webpack.config.js 파일을 생성해준다.
• 파일 내에 아래 코드를 작성해준다.

const path = require("path");
module.exports = {
    entry : "./src/js/index.js",
    output : {
        filename : "bundle.js",
        path: path.resolve(__dirname, "./dist"),
        clean : true
    },
    devtool : "source-map",
    mode : "development",
}

• entry 속성이란?
  • 자바스크립트 파일의 진입점
• output 속성에 대해
  • 웹팩을 돌리고 난 결과물의 파일 경로
  • output 속성 옵션 형태
    • filename 은 최소한으로 지정해줘야하며, 코드와 같이 path 속성과 함께 정의합니다.
      • filename : 웹팩으로 빌드한 파일의 이름
      • path : 해당 파일의 경로
      • path.resolve() : 인자로 넘어온 경로들을 조합하여 유효한 파일 경로를 만들어준 Node.js API
        • 웹팩은 상대경로를 찾을 수 없어서, path 라는 모듈을 불러와서, resolve 라는 메소드를 require 해준다.
        • 그리고 __dirname 을 적어서 상대경로를 찾을 수 있도록 해줌.
      • clean : 생성될 파일 경로에 이미 같은 파일이 있다면, 지우고 새로 만들어줌
• devtool : "source-map" ?
  • 빌드한 파일과 원본 파일을 빌드업 해주는 속성
• mode
  • 기본으로 production , development 값이 있음.
    • production : 배포 모드 (기본 값)
    • development : 개발 모드

---

웹팩의 추가적인 압축 플러그인 설치

• 아래의 코드를 터미널에 입력해 플러그인을 설치해준다.

npm i -D terser-webpack-plugin

• 설치한 플러그인을 webpack.config.js 에 불러와준다.

const TerserWebpackPlugin = require('terser-webpack-plugin');

• 아래의 코드를 작성해준다.

const path = require("path");
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
    entry : "./src/js/index.js",
    output : {
        filename : "bundle.js",
        path: path.resolve(__dirname, "./dist"),
        clean : true
    },
    devtool : "source-map",
    mode : "development",
    optimization : { // 추가된 코드
        minimizer: [
            new TerserWebpackPlugin()
        ]
    }
}

 

*optimization Minimizer

- Bundle 파일을 압축하는 것
- TerserPlugin을 이용한 압축방식이기 때문에, minimize를 설정을 위해서는 terser-webpack-plugin 모듈을 install 해야한다.
하지만, Webpack5부터는 해당 Plugin이 내장 지원이 되므로, 이를 생략할 수 있다.

• 아래의 코드를 터미널에서 입력하면, 설정한 코드의 파일들이 생성 된 것을 확인해볼 수 있다.

npx webpack

* browser 에 관한 오류나 여러 오류가 나오신다면 저장을 했는지 확인해보기

완성 모습

---

HTML 과 CSS 를 설정해줄 모듈 설치

• index.html 파일을 생성
• html 기본 세팅을 완료한 뒤 , 터미널에 아래의 코드를 입력해 모듈을 설치해준다.

npm i -D html-webpack-plugin

• webpack.config.js 파일로 가서, plugin 아래와 같이 설치한 내용을 추가해준다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

    plugins : [
        new HtmlWebpackPlugin({
            title: "Virtual-Keyboard",
            template : "./index.html",
            inject : "body",
            favicon : "./favicon.ico"
        })
    ]

HtmlWebpackPlugin 의 기본 설정
1. title : 웹 페이지의 타이틀 제목 설정
2. template : 빌드를 할 때 text 를 무엇으로 사용할 것인지
3. inject : 빌드를 해줄 때 js 파일을 어디에 넣어줄 것인지
4. favicon : 같은 경로에 있는 favicon.ico 파일을 사용할 것임. (수정할 때 파일만 바꿔주면 됨) (파일명 수정 가능)

* html-webpack-plugin 의 template 을 index.html 로 사용할 경우
- index.html 안에서 lodash 라는 문법을 사용할 수 있게 해줌.

* Lodash 란?
- 유틸 성 메소드나, 템플릿 관련 메소드 등을 제공해주는 라이브러리

• index.html 파일로 가서 아래와 같이 title 태그에 Lodash 문법을 사용해준다.

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

---

CSS 와 관련된 모듈 설치

npm i -D mini-css-extract-plugin css-loader css-minimizer css-minimizer-webpack-plugin

• mini-css-extract-plugin 을 webpack.config.js 파일에 추가해준다. (윗 방법과 동일)

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
plugins : [
    new HtmlWebpackPlugin({
        title: "Virtual-Keyboard",
        template : "./index.html",
        inject : "body",
        favicon : "./favicon.ico"
    }),
    new MiniCssExtractPlugin({
        filename : "style.css"
    }) // 추가된 코드 
]

• index.js 로 가서 css 파일을 import 해준다.

import "../css/style.css"

---

모듈 설정

• css 파일을 css 플러그인에 있는 loader 를 사용해, loader 하겠다는 의미로 쓰기 위해 설정
• plugin 작성한 것 밑에 작성해준다.

,
    module:{
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    }

---

CSS 를 압축해주는 설정 (css-minimizer-webpack-plugin)

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

    optimization : {
        minimizer: [
            new TerserWebpackPlugin(),
            new CssMinimizerPlugin() // 추가된 코드
        ]
    }

---

 

build 하기

• package.json 의 scripts 에 build 를 추가해준다.
  • mode=production 을 추가한 이유
    • 모드를 배포 모드로 함으로써, 불필요한 코드를 줄여 최적화 시켜주는 역할을 해줌.

  "scripts": {
    "build" : "webpack --mode=production"
  },

• 터미널에 아래와 같은 코드를 입력해 , build 를 해준다.

npm run build

• build 완료 된 모습

---

webpack-dev-server 사용하기

* webpack-dev-server 란?
- 빠른 실시간 리로드 기능을 갖춘 개발 서버
- 디스크에 저장되지 않은 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라짐
- webpack.config.js 에도 devServer 옵션을 통해 옵션을 지정하여 사용 가능

* webpack-dev-server 의 동작 원리
- 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
- 소스 파일이 변경되면 변경된 모듈만 새로 번들링
- 변경된 모듈 정보를 브라우저에 전송
- 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드

• webpack-config.js 파일에서 아래와 같은 코드를 추가해준다. (위치는 아무곳 상관 없음)

    devServer : {
        host : "localhost",
        port: 8080,
        open: true,
        watchFiles: "index.html"
    },

open 속성
- devserver 를 사용할 때마다 창을 새로 열어달라고 하는 속성

watchFiles 속성
- 설정된 파일이 변경될 때마다 리로드 될 수 있도록 해주는 속성

• package.json 파일에서 "scripts" 부분에 아래와 같이 추가해준다.

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

• 아래와 같은 코드로 dev-server 를 사용해준다.

npx webpack-dev-server

 

dev-server에서 favicon 적용이 안되는 분

• Favicons Webpack Plugin 을 설치한다.

npm install --save-dev favicons favicons-webpack-plugin

• webpack.config.js 파일에 import 해주고, plugins에 플러그인을 추가해준다.

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

plugins : [
    new HtmlWebpackPlugin({
        title: "Virtual-Keyboard",
        template : "./index.html",
        inject : "body",
        favicon : "./favicon.ico"
    }),
    new MiniCssExtractPlugin({
        filename : "style.css"
    }),
    new FaviconsWebpackPlugin('./favicon.ico')
],

dev-server 에서는 왜 favicon 이 안보일까? 한 5시간동안 이유를 못찾았습니다..
배포된 index.html 을 라이브 서버로 보면, favicon 이 보이더라구요
이유를 혹시 알고 계신 분들은 댓글 부탁드릴게요 !