정적 파일 연결
프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지에 대해 살펴보도록 하겠습니다.
1. 실습 환경
1-1 이미지 파일 위치
위와 같이 root경로에 static이라는 폴더를 만들어 favicon.ico파일을 위치시켰습니다. 또한 static폴더 내부에 imges라는 폴더를 만들어 그 안에는 img파일을 위치시켰습니다.
1-2 HTML
html
<body>
<h1>Hello Webpack!!</h1>
<img src="./images/logo.png" alt="0seo8">
</body>index.html파일을 살펴보면 img태그의 이미지루트로 index.html파일의 주변에서 imges라는 폴더를 찾아 그 안에 위치한 logo.png파일을 사용하도록 명시해 놓았습니다.
2. 작동 원리 이해
1번에 명시된 구조를 살펴보면 imges폴더는 static폴더 내부에 위치하며 index.html파일에 명시된 경로와는 다릅니다.
하지만 최종적으로 번들링되어 생성한 index.html파일을 dist 폴더 내부에 위치시키게 됩니다. 결국 dist폴더 내부에 위치한 index.html의 경우 그 주변에서 이미지 폴더를 찾을 수 있게 되는 것입니다.
3. 패키지 설치 및 구성옵션 명시
이러한 동작을 적용시키기 위해서는 copy-webpack-plugin 이라는 패키지 설치가 필요합니다.
$ npm install -D copy-webpack-pluginwebpack.config.js
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
...
plugins: [
new HtmlPlugin({
template: './index.html'
}),
new CopyPlugin({
patterns: [
{ from: 'static' } //만들어놓은 폴더명 명시
]
})
]
}patterns라는 옵션에 어디로부터 폴더를 복사해서 dist라는 폴더로 집어넣을지를 배열 형태(여러개 명시가 가능합니다.)로 명시해줍니다.
즉, CopyPlugin을 통해서 static폴더 내부에 들어있는 내용이 말그대로 Copy(복사)되어, dist폴더로 들어갈 수 있는 구조가 만들어지게 되는 것입니다.
4.개발 서버 오픈
npm run dev로 개발 서버를 열고 확인하면, 이미지와 파비콘 파일이 잘 실행됨을 확인할 수 있습니다.
마찬가지로 npm run build를 실행시켜보면 dist폴더에 내용이 잘 만들어져 들어가 있는 것을 확인할 수 있습니다.
자바스크립트를 통해 이미지 삽입
import './main.css'
import imgSrc from './static/heropy.png'
const abc= () => 123
console.log(abc)
const imgEl = document.createElement('img')
imgEl.src = imgSrc
document.body.append(imgEl) {
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset/resource'
}