[Vue.js] vue-loader, SFC Spec, webpack 설정

1. vue-loader란

Vue 컴포넌트를 단일 파일 컴포넌트(SFCs) 형식으로 작성할 수 있게 해주는 webpack용 로더

 

vue-loader가 무엇인지, 어떤 기능을 하는지

그리고 webpack에서는 어떻게 설정해주면 되는지 정리해보았다.

 

2. Vue Single-File Component (SFC)

*.vue 파일은 HTML과 같은 구문을 사용하여 Vue 컴포넌트를 설명하는 사용자 지정 파일 형식이다.

각 *.vue 파일은 <template>, <script>, <style> 세 가지 언어 블록으로 구성되며

선택적으로 사용자 지정(커스텀) 블록을 추가할 수 있다.

<script> 블록은 기본적으로 ES 모듈로 처리된다.

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

각 블록에 src를 사용하여 외부 파일을 불러와 사용할 수 있다.

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

<!-- 커스텀 -->
<unit-test src="./unit-test.js"></unit-test>

 

3. vue-loader의 기능

여기서 vue-loader는 파일에서 각 언어 블록을 추출하고

필요한 경우 다른 로더를 통해 파이핑하여 (ex) <style>엔 Sass, <template>엔 Pug)

최종적으로 이들을 Vue 컴포넌트 옵션 개체인 ES 모듈로 재조립한다.

 

또한 vue-loader는 언어 블록에 대한 lang 속성을 지원하여

기본 언어가 아닌 언어를 사용할 수 있는데

예를 들어 <style> 블록에 lang을 Scss로 설정하여 사용할 수 있다.

<style lang="scss">
div {
  &.example {
    color: red;
  }
}
</style>

그 외에도 제공하는 기능을 요약하자면 다음과 같다.

▷  *.vue 파일에 커스텀 블록 생성 가능
▷  개발 중 핫 리로딩 제공

 

4. webpack VueLoaderPlugin 설정

*.vue 파일에 vue-loader를 적용하려면

다음과 같이 webpack 설정을 추가해준다.

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
// const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

여기서 <script> 블록은 /\.js$/와 매칭되고

<style> 블록은 /\.css$/와 매칭된다.

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

그래서 이와 같이 webpack.config.js를 설정해주면

*.js 파일과 *.vue 파일의 <script> 블록에는 babel-loader가 적용되며

*.css 파일과 *.vue 파일의 <style> 블록에는 vue-style-loader, css-loader가 적용된다.

 

만약 *.vue 파일의 <script> 블록에만 babel-loader를 사용하고 싶다면

다음과 같이 설정해주면 된다.

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.js$/,
        oneOf: [{
            resourceQuery: /^\?vue/,
            loader: 'babel-loader'
        }]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

 

 

참고

Introduction | Vue Loader

SFC Spec | Vue Loader