3. Vue - 이미지 파일 연결 및 경로 별칭 설정

1. 파일 확장자 생략을 위한 설정 

• webpack.config.js 파일에서 위의 사진과 같이 resolve 속성에 extensions를 설정한다. 
• js와 vue 파일을 import하거나 링크하는 경우, 확장자를 따로 명시하지 않아도 동작하도록 해주는 설정이다. 
• 이 외에도 다른 확장자 이름을 등록하면 해당 확장자 없이 파일을 연결할 수 있다. 
• 해당 설정을 마치면 아래와 같이 확장자명을 기입하지 않고 사용할 수 있다. 

---

2. 이미지 연결 및 경로별칭 설정

• src폴더 내부에 components 라는 폴더를 생성한다. 
• 기존에 static 폴더에 있던 images 폴더를 src 폴더 내부로 옮긴다. 

 

• 기존의 images 폴더의 이름을 assets로 변경한다.

 

<template>
  <img src="~assets/logo.png" alt="" />
</template>

• HelloWorld.vue에 다음과 같이 작성한다. 
• 이 후, 경로 별칭 설정을 위해 파일로더 패키지를 설치한다.
• 터미널 입력: npm i -D file-loader
• 패키지 설치 후 다음과 같이 webpack.config.js를 설정한다. 

module 부분에 새로운 객체를 생성하여 작성한다.

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

// export
module.exports = {
  resolve: { // 파일 링크 걸을때, js 또는 vue 확장자 기입하지 않아도 되도록 하는 속성
    extensions: ['.js', '.vue'],
    alias: { // 경로 별칭 설정 ==> 경로를 별칭으로 지정하여 사용. 
      '~': path.resolve(__dirname, 'src'),
      'assets':path.resolve(__dirname, 'src/assets')
    }
  },
  // 파일을 읽어들이기 시작하는 진입점 설정 
  entry: './src/main.js',

  //결과물(번들)을 반환하는 설정 
  output: {  
    clean: true // 덮어쓰기 기능 속성 
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.s?css$/, 
        use: [
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        use: ['file-loader']
      }
    ] 
  },

  plugins: [ 
    new HtmlPlugin({ 
      template: './index.html' 
    }),
    new CopyPlugin ({
      patterns: [
        { from: 'static' } 
      ]
    }),
    new VueLoaderPlugin()
  ],

  devServer: {
    host:'localhost'
  }
} 

 

• 이제 마지막 작업이다. 
• App.vue를 다음과 같이 작성해준다. 

<template>
  <h1>{{message}}</h1>
  <HelloWorld></HelloWorld>
</template>

<script>
import HelloWorld from '~/components/HelloWorld'
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      message: "Hello Vue!!!"
    }
  }
  
}
</script>

<style>

</style>

• 위의 코드를 설명하자면 다음과 같다. 
• HelloWorld.vue를 HelloWorld라는 이름의 변수로 만들어 import한다.
• 해당 파일이 어디에 있었는가? components 파일에 만들었던 것을 기억하는가? 
• exports default에 components 속성을 추가하고 해당 변수를 등록한다. 
• 이제 이 HelloWorld라는 이름을 HTML 태그로 이용할 수 있다. 
• 해당 태그에서 HelloWorld.vue가 갖고있는 화면이 출력된다. 확인해보자. 

---

3. 결과 확인

• 크롬 개발자 도구를 사용하여 확인해보면 위의 사진과 같이 이미지 태그가 잘 삽입된 것을 확인할 수 있다.