webpack plugin, 정적파일 연결, module[패스트캠퍼스 챌린지 24일차]

plugins

html 파일을 삽입해서 개발 서버를 오픈해보자

npm i -D html-webpack-plugin

→ 설치 후 webpack.config.js로 이동해서 require 작성

const HtmlPlugin = require('html-webpack-plugin')

해석) 'node_modules에서 html-webpack-plugin을 가져와서 HtmlPlugin에 할당하겠다'

그리고가져온 저 녀석을 어디에서 실행할 것인지 구성 옵션으로 명시해줘야함

→ 내보내기(module.exports) 안에 plugins 배열 데이터 작성

new 태그 붙여서 생성자함수처럼 실행해주기

→ plugins: [new HtmlPlugin()]

일케 하면 어떤 결과가 반환되겠지?

그 반환된 결과가 plugins 배열의 첫번째 아이템으로 사용이 되는 거임

→ 그 내부에 추가적으로 생성자 함수의 옵션으로 객체 데이터를 적어주자

내부에 template이라는 옵션에 상대 경로로 index.html 명시해주기

여기서 index.html은 루트경로에 있는 그 녀석임

  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
  ],

— 설명 —

webpack이 js폴더 안에 main.js 읽어들여서 그것에 대한 결과를 output에 있는 옵션으로 만들어 내게 되는데,

만들어내는 과정에서 plugins에 명시된 여러가지 플러그인들을 활용하게 됨

그때 html-webpack-plugin을 통해 template으로 우리가 만든 index.html을 지정해놨잖아

그 index.html과 main.js의 병합된 합본이 dist 폴더에 만들어질 거임

다 되면 이런 모습

const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./js/main.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    clean: true,
  },

  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
  ],
};

— 번외 —

npm run dev 했을 때 로컬호스트 그 주소가 이상하게 나오면?

webpack.config.js에 module.exports 안에 하나 더 추가해주자

devServer: {
    host: 'localhost'
}

---

정적 파일 연결

이미지랑 파비콘을 연결해보자

루트 경로에 static이란 폴더 생성해서 준비한 이미지 파일들 넣어주기

→static 폴더 안에 images란 폴더 생성해서 png 파일 넣어주기

→ index.html에 img 태그 작성

<img src="./images/logo.png" alt="logo" />

경로에서 static 폴더는 어디갔냐 싶지만 ./static/images/logo.png

나중에 npm run build 후 dist 폴더로 가고 나면 상대경로로 images 폴더 찾을 수 있을 거임

이제 관련 패키지를 설치하고 webpack.config.js에서 세팅 해주면 됨

→ npm i -D copy-webpack-plugin 관련 패키지 설치하고

webpack.config.js에서 세팅 해주기

→ 플러그인 가져오기

const CopyPlugin = require("copy-webpack-plugin");

→ 내보내기

내보내기(module.exports) plugins의 두번째 아이템에

new라는 키워드로 실행 new CopyPlugin()

CopyPlugin 옵션 명시하기 위해

생성자 함수의 인수, 중괄호 내부로 들어가

patterns라는 옵션 명시하고 배열데이터 [ ]

이 배열데이터의 첫번째 아이템으로 중괄호 열고

from: 'static'

얘는 아까 만든 static이라는 폴더임

— 정리 —

CopyPlugin을 통해서 static 폴더 안에 있는 내용이 말 그대로 카피가 돼서

dist라는 폴더로 들어갈 수 있게 만들어 주는 플러그인

다 되면 이런 모습

//import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
//export
module.exports = {
  //파일을 읽어들이기 시작하는 진입점 설정
  entry: "./js/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    clean: true,
  },
  // 번들링 후 결과물의 처리 방식 등의 다양한 내용을 지정해주는 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html",
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static'}
      ]
    })
  ],
  devServer: {
    host: "localhost",
  },
};

---

module

프로젝트에 스타일 적용해보자

static 폴더 이용

dist에서 css 파일만 찾을 수 있으면 되는 거 아니겠어?

static 폴더에 css라는 이름의 폴더와 그 안에 main.css 파일 생성해주기

html에서 main.css 파일을 링크해주면 됨

링크 태그의 상대 경로는 ./static으로 시작하는 게 아니라 ./css로 시작함

이유는 위에 이미지 삽입할 때의 경우와 같음

→ 어차피 dist 들어가면~~ 이 내용임

다른 방법! js 파일에서 가져오기

루트 경로에 css란 폴더를 생성( 그 안에 main.css 만들기)

js폴더에 main.js로 가서

import css from '../css/main.css'

(해석) import 키워드를 통해 css라는 변수에 해당하는 내용을 가지고 올 거고
한번 밖에 나가서 주변에 있는 css 폴더 안의 main.css를 가지고 와서 연결

그런데 css 파일을 가지고 와서 변수에 담아 봐야 사용할 수 없기 때문에

변수 css와 from은 제거해주자

import '../css/main.css'

(해석) 단순하게 파일만 가지고 와서 main.js에 연결

이게 어떻게 돌아가는 얘긴지 webpack.config.js로 가서 해석해 보면.

webpack에 진입점으로 설정해놓은 파일은 위에 언급한 ./js/main.js 이 녀석임.

그래서 웹팩은 무조건 이 main.js부터 읽기 시작할 거다.

그랬을 때 이 main.js에 css가 연결이 되어 있으면,
웹팩이 이 연결된 css 파일도 읽을 수 있는 구조가 되는 거임

그렇게 읽은 css 파일은 html 파일과 섞어서 다시 dist라는 폴더로 내어줄 수도 있는 그런...

→ 이게 복잡한 과정일 수도 있는데
이러한 과정을 거치면 더 많은 것들을 할 수가 있기 때문에 기억해놓자

→근데 여기서 한 가지 문제가 발생할 수 있음.

webpack 자체는 css 파일을 읽을 수 없다는 거.

웹팩은 단지 저 녀석들을 합쳐서 dist라는 폴더로 내어주는 역할을 하는 거임.

css파일을 읽을 수 있는 외부의 패키지를 설치할 수도 있는데, 당장 설치하러 가보자

css파일을 읽을 수 있는 패키지 설치하기

npm i -D css-loader style-loader

css-loader와 style-loader 두 개의 패키지 설치하기

• css-loader와 style-loader가 하는 역할

  이 두 녀석의 역할은 이러함.

  먼저 해석되는 로더는 css-loader.

  css-loader 패키지는 js에서 css파일을 해석하기 위한 용도로 사용함

  js파일에서 'css 파일 가져오기'를 쓰고있긴 하지만, js는 css를 해석할 수 없기 때문임.

  그리고 이 해석된 내용은 어디선가 사용을 해야하잖아?

  그랬을 때 style-loader가 html 스타일 태그 부분에다가 해석된 내용을 삽입해주는 역할을 함

webpack.config.js에 세팅하러 가자

→ module.exports에다가 module이란 옵션을 추가 하고

→ 그 옵션의 첫번재 속성으로 rules

→ rules의 값은 배열데이터

→ 배열의 첫번째 아이템은 객체데이터

그 객체데이터 안에

→test라는 속성과 그 값 /\.css$/ (값은 정규표현식으로 작성함)

(해석) .css라는 확장자로 끝나는 것을 찾는 정규식

$ 달러 사인은 사인 앞에 있는 내용으로 끝나는 특정한 문자를 찾는 녀석임

이스케이프 문자 (Escape String)는 백슬래시를 사용해 원래의 의미를 벗어나는 문자를 만들 수 있다. 정규표현식에서 . 마침표는 '임의의 한 문자'를 의미하기 때문에, 그 의미에서 벗어나 단순 마침표로 해설될 수 있도록 이스케이프 문자로 만들어줘야 함

→use라는 속성은 배열 데이터로 작성

배열 데이터 안에 설치한 패키지의 이름 명시해주기(순서 중요함)

style-loader부터 작성해야 함.

작성 예제 보자

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

해석→ 확장자를 가지고 있는 모든 css파일 같은 경우에는 test라는 속성으로 해당하는 내용을 매칭해서 거기서 어떤 것들을 사용할 건데 그것이 바로 우리가 설치한 style-loader, css-loader

---

역시 못알아먹을 때는 쌤 말하는 거 다 받아쳐야 함
ㅠㅠ
수업 10분짜리 듣는데 2시간이 걸림
일해라 두뇌야

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online