정적 파일 연결

프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지이다.

1. 정적 파일 예시(favicon.ico)

이미지 파일 연결을 예시로, favicon.ico 파일 준비한다.

1-1 static 폴더 생성

static 폴더안에 favicon.ico 파일을,
static>images 폴더에는 png파일을 넣어준다.

1-2. img태그 연결

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

현재는 static 폴더안에 images폴더가 있는데 이렇게 경로를 명시한 이유는 index.html을 최종의 번들 결과로 dist 폴더 안에 만들어서 사용하게 되는데, 그 안에서는 images라는 폴더가 주변에서 찾아 질 수 있는 구조가 되기 때문이다.

이 부분이 바로 동작시켜서 적용되는 것은 아니고, 기본적인 동작을 셋팅하고자 패키지를 설치해야한다.

패키지 설치

$ npm install -D copy-webpack-plugin

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

// export
module.exports = {
  plugins: [
    new HtmlPlugin({
      template: './index.html',
    }),

 // static 폴더를 dist로 복사하는 개념 
    new CopyPlugin({
      patterns: [{ from: 'static' }],
    }),
  ],

개발 서버 오픈

$ npm run dev

$ npm run build

npm run build를 해주면 dist 폴더에 내용들이 들어감
static폴더안에 있는 내용들을 복사해서 dist로 옮겨갔고, index.html파일 주변에 images 폴더가 있으니
img 경로가 맞아 지는 것이다.