웹팩의 기초와 프로젝트 기본 세팅에 관한 정리

🚀 목표

1. 웹팩 기초 개념 익히기
2. 웹팩으로 기본 프로젝트 세팅하기
3. 강의 내용(새로 알게 된 지식 위주) 문서화 하기

🔖 리소스

• 강의 사이트
• 공식 사이트

📝 강의 노트

1️⃣ NPM

Node Package Manager의 약자로 명령어로 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저

1. node.js 설치

2. NPM 초기화(package.json 생성) - 프로젝트 폴더에서 Terminal Open!

   npm init -y
   

3. 사용할 라이브러리 설치 dependencies(직접적인 연관이 있는) / devDependencies(개발용 라이브러리) 를 잘 구분해서 설치한다. ⚠ Why? → devDependencies는 build할 때 포함되지 않기 때문!!!

   npm i 라이브러리명
   npm i 라이브러리명 -D    //devDependencies에 설치
   

2️⃣ Webpack

모듈 번들러로, 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다.

웹팩은 기본적으로 필요한 자원을 미리 로딩 하는게 아닌, 그 때 그 때 요청하자는 철학을 갖고 있는 게 가장 두드러지는 특징 중 하나이다.

1. 웹팩 설정파일(webpack.config.js) 작성

   var path = require('path'); // node.js 라이브러리인 path를 가져온다.
   var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // CSS파일을 분리하기 위한 플러그인
   
   module.exports = {
     mode: 'none', // production(배포할 때), development, none
     entry: './src/index.js', // 웹팩을 돌릴 대상
     output: { // 웹팩을 돌린(빌드를 하고 난) 결과물
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist') // resolve API를 사용하여 배포 경로를 잡아준다.
     },
   	module: {  // entry -> output으로 변환을 할 때 중간에 개입하는 과정
   		rules: [
   			{ // 필요한 모듈을 한 쌍씩 추가한다.
           test: /\.css$/, // 모든 css 확장자를 가진 파일을 대상으로
           use: ['style-loader', 'css-loader']  // 이 로더를 적용하겠다.
   				// style-loader = <head>안에 스타일을 넣어주는 역할				
   				// css-loader = css가 웹팩 안으로 들어갈 수 있게 해 주는 역할
         }
   		]
   	},
   	plugins: [
       new MiniCssExtractPlugin()
     ],
   	devtoll: 'source-map'  // bundle.js 에서 원본 js 파일로 연결해서 확인할 수 있도록 해준다.
   };
   

   Node.js - path 라이브러리 : https://nodejs.org/api/path.html

   • entry - 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로, 전반적인 구조와 내용이 담겨져 있어야 한다.
   • output - 빌드 후 결과물의 파일 경로, 객체 형태로 옵션을 추가해야 함.
   • loader - 자바스크립트 파일이 아닌 웹자원(HTML, CSS, 이미지, 폰트 등)들을 변환할 수 있도록 도와준다. module 이라는 이름을 사용 함.
   • plugin - 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 라이브러리라고 생각하면 됨.
     • split-chunks-plugin
     • clean-webpack-plugin
     • image-webpack-loader
     • webpack-bundle-analyzer-plugin

2. Dev Server 설정(일종의 Live Server)

   "scripts": {
     "dev": "webpack serve",
     "build": "webpack"
   }
   

   <aside> 💡 웹팩 데브 서버로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없다. 좋은 점은 컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원의 소모가 적다.

   </aside>

3. 이미지 번들링하기 webpack.config.js 수정 및 추가

   const CopyPlugin = require('copy-webpack-plugin');
   
   plugins: [
     new CopyPlugin({
       patterns: [
         { from: 'src/assets' }
       ]
     }),
   ],
   module: {
     rules: [
       // file-loader 세팅
       {
         test: /\.(png|jpe?g|gif|svg|webp)$/i,
         use: [
           {
             loader: 'file-loader',
             options: {
               publicPath: "./dist/",
               name: 'images/[name].[ext]'
             }
           },
         ],
       }
     ]
   },
   

   index.js 에 html 파일에서 직접 사용할 이미지 추가

   import './assets/images/img_example.jpg'
   

   <aside> 💡 CSS에서 사용하는 이미지는 index.js에 추가하지 않아도 제대로 적용이 되는데 html에서 직접 사용하는 이미지는 추가하지 않으면 dev 작업 시 보이지 않는다… 연구 필요

   </aside>

Ref

https://velog.io/@dom_hxrdy/webpackfile-loader-로-html에서-이미지-참조하기