Webpack - 정적 파일 연결

fabicon파일과 이미지파일을 해당 프로젝트 파일에 옮겨둔 후 시작한다.

 

아래 이미지와 같이 파일을 옮겨준다.

index.html에 아래와 같은 코드를 추가해준다.

<!-- 최종적으로 dist폴더내에 생성되기 때문에 아래와 같은 경로로 지정해주었다. -->
  <img src="./images/image.jpg" alt="image" />

 

정적 파일을 연결하기 위해서 패키지를 추가로 설치 해주어야 한다.

명령어: npm i -D copy-webpack-plugin

설치가 완료된 후 webpack.config.js 파일에서 설치한 패키를 가져와서 사용한다.

// 정적 파일 연경을 위한 패키지 가져오기
const CopyPlugin = require('copy-webpack-plugin');

// 설치한 패키지 사용하기 (플러그인 내부에 추가로 입력한다.)
    new CopyPlugin({
      patterns: [
        // static 폴더 안에 파일들이 dist라는 폴더로 들어가도록 설정
        { from: 'static'}
      ]
    })

 

터미널에서 명령어: npm run dev 입력하여 확인

 

명령어: npm run build를 실행하면

dist폴더 내부에 새로 추가한 이미지 파일들이 생성된다.

webpack의 실행파일은 dist안에 있는 파일이 실행되는 것이다.