정적 파일 연결
본인이 프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지에 대해 배워봅시다.
이를 정적 파일 연결이라하며, 새로운 개념이므로 아래 내용으로 살펴보도록 합시다.
1. favicon.ico
프로젝트 내에 favicon.ico 파일을 준비해줍니다. 어떤 파일이건 상관없으며, 저는 flaticon 홈페이지의 아래 파일을 이용하여 진행하도록 하겠습니다.
2. static 폴더 생성
프로젝트 내에 static 폴더를 생성해줍니다. 해당 폴더에 파비콘 파일을 넣어줍니다.
2.1 images 폴더 생성
static 폴더 내에 images 폴더를 생성해주고 프로젝트에 필요한 이미지 파일을 넣어줍니다. 저는 파비콘 파일의 원본 이미지인 logo.png 파일을 넣어주도록 하겠습니다.
2.2 logo.png 연결
<body>
<h1>Hello Webpack!!</h1>
<img src="./images/logo.png" alt="OROSY">
</body>images 폴더에 넣어준 파일이 제대로 동작하는 것을 확인하기 위해 index.html에 해당 내용을 코딩해줍니다.
3. 정적 파일 연결
실제로 정적 파일 연결을 위한 터미널 명령어와 설정 방법에 대해 알아봅시다.
3.1 패키지 설치
정적 파일 연결 패키지를 개발용으로 설치해줍니다.
npm install -D copy-webpack-plugin3.2 webpack.config.js
webpack 구성 옵션 파일에 아래와 같이 코딩을 진행해줍니다.
const CopyPlugin = require('copy-webpack-plugin')
plugins: [
new CopyPlugin({
patterns: [
{ from: 'static' }
]
})
]이는 프로젝트 내에 만들었던 static 폴더 안에 있는 내용을 새로 설치한 CopyPlugin 패키지를 통해 복사가 되어 dist 폴더에 들어갈 수 있도록 해줍니다.
3.3 개발 서버 오픈
npm run dev로 개발 서버를 열고 확인하면, 이미지와 파비콘 파일이 잘 실행됨을 확인할 수 있습니다.
Life is a matter of a direction not a speed.