2. webpack - index.html 연결하기

1. 개발서버를 이용한 index.html 확인하기 

a) 웹팩 플러그인 설치

• 터미널 입력: npm i -D html-webpack-plugin 

 

b) webpack.config.js 설정

• webpack 플러그인 import 하기 
• output 부분에 플러그인 사용을 위한 구성요소(plugins, devServer) 추가하기 

// import
const path = require('path') // node 모듈을 import 해오는 기본방법 
const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기 


// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정 
  entry: './js/main.js', 

  //결과물(번들)을 반환하는 설정 
  output: {
    // path: path.resolve(__dirname, 'dist'), // 결과물의 반환지점을 설정 
    // filename: 'main.js',
    // 위에 path와 filename 을 주석처리 한 이유는, default로 설정되어 있기 때문
    // path는 dist로 filename은 위에 entry에 설정한 파일이름 그대로 따라감
    // npm run build 입력하면 dist 폴더와 내부파일(결과물)이 생성됨   

    clean: true // 덮어쓰기 기능 속성 
  },

  // 번들링 후 결과물의 처리방식 등 다양한 플러그인 사용을 위한 구성요소 추가 
  plugins: [ 
    new HtmlPlugin({ // 생성자를 이용한 플러그인 생성 
      template: './index.html' // 템플릿 연결 
    })
  ],

  devServer: {
    host:'localhost'
  }
} 

 

 

c) 플러그인 실행

• 터미널 입력: npm run dev 
• 결과 확인하기 

---

2. 정적 파일 연결하기 

a) 이미지 파일 준비하기

• 로고이미지 파일 1개와 파비콘 용으로 사용할 ico 파일 1개를 준비한다. 

 

b) 폴더 생성

• 루트 경로에 static 폴더를 생성하고 파비콘 파일을 넣는다. 
• static 폴더 내부에 images 폴더를 생성하고 로고 이미지를 넣는다. 

 

c) HTML과 연결한다. 

• 연결할 html 파일에서 img 태그를 입력한다. 파비콘은 경로를 따로 명시하지 않아도 사용할 수 있다. 
• 경로는 다음과 같이 명시한다. 

 

- 분명히, 이미지 파일은 static 폴더안에 있는데 왜 경로를 이렇게 작성한 걸까? 

• 빌드 후에 dist라는 폴더 안에서 이미지 파일들이 해당 경로에 위치하기 때문이다.
• 이렇게 작동하게 하려면 webpack.config.js 파일 설정을 추가해줘야 한다. 

 

d) 이미지 파일 경로 설정을 위한 패키지 설정 

• 터미널 입력: npm i -D copy-webpack-plugin
• 해당 설정을 하게되면 static 이라는 폴더 안의 내용을 복사해서 dist에 들어가도록 하게한다. 
• 이 외에도, pattern 속성의 배열 안에 딕셔너리 형태로 여러개의 경로 생략을 지정할 수 있다. 

// import
const path = require('path') // node 모듈을 import 해오는 기본방법 
const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기 
const CopyPlugin = require('copy-webpack-plugin')

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정 
  entry: './js/main.js', 

  //결과물(번들)을 반환하는 설정 
  output: {
    // path: path.resolve(__dirname, 'dist'), // 결과물의 반환지점을 설정 
    // filename: 'main.js',
    // 위에 path와 filename 을 주석처리 한 이유는, default로 설정되어 있기 때문
    // path는 dist로 filename은 위에 entry에 설정한 파일이름 그대로 따라감
    // npm run build 입력하면 dist 폴더와 내부파일(결과물)이 생성됨   

    clean: true // 덮어쓰기 기능 속성 
  },

  // 번들링 후 결과물의 처리방식 등 다양한 플러그인 사용을 위한 구성요소 추가 
  plugins: [ 
    new HtmlPlugin({ // 생성자를 이용한 플러그인 생성 
      template: './index.html' // 템플릿 연결 
    }),
    new CopyPlugin ({
      patterns: [
        { from: 'static' } // static 폴더 안의 내용이 dist로 복사되어 들어가도록 한다. 
      ]
    })
  ],

  devServer: {
    host:'localhost'
  }
} 

 

 

e) 확인하기 

• 터미널 입력: npm run dev
• 이미지 파일과 파비콘이 잘 나오는지 확인한다.
• localhost 주소로 페이지를 열었는데 파비콘이 안나온다면, 127로 시작하는 링크를 이용해 들어가보자. 

 

 

f) 빌드 확인하기

• 터미널 입력: npm run build 
• dist 폴더에 이미지 파일들이 잘 들어가 있는지 확인해보자. 
• html 파일에도 img 태그의 경로가 잘 작성되어 있는지 확인해보자.