webpack, vue-loader, vue-style-loader

<Webpack>

 

-최신 프론트엔드 프레임워크에서 권장하는 모듈 번들러 

- 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(javascript)으로 변환시켜주는 도구- 어플리케이션 동작과 관련된 여러 개의 파일(HTML, css, js, Image 등)들을 1개의 javascript파일로 변환하고, 이 js파일만 브라우저에서 로딩하면 어플리케이션이 실행되는 것

- Vue CLI를 통해 프로젝트를 실행하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm rub build' 실행 시 webpack기반으로 동작한다.

 

 

 

<npm 패키지 모듈설정>

• webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install
• package.json 에서 확인
• vue-template-comfiler의 버전와 vue의 버전은 항상 일치

 

<Webpack.Config.Json 파일 생성>

vue CLI 3버전부터는 vue.config.js로 웹팩 설정을 관리

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    app: path.join(__dirname, 'main.js')
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
    }],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
  },
};

• mode
  • development 모드를 선언
• entry
  • 현재 디렉토리의 main.js라는 파일을 기준으로 번들링 작업을 수행
• module 
  • .vue(확장자)로 끝나는 모든 파일을 경로에서 탐색한뒤 Bundling
    • test : /\는 시작 $/는 끝을 의미하는 정규식
    • loader: vue-loader를 사용하겠다고 선언. vue-loader는 npm으로 앞에서 다운받은 모듈을 의미
    • vue-loader는 vue의 component를 일반적인 자바스크립트 모듈로 변환할 수 있도록해주는 webpack loader
• plugin 
  • Vue Loader를 사용하기 위해 추가적으로 VueLoaderPlugin을 명시해주어야 한다. (vue-loader 15버전 이상부터)
  • 추가적으로 plugin과 loader의 차이
    • plugin : 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리 (즉 vue컴포넌트 파일을 번들링)
    • loader : 번들링된 결과물의 형태를 바꾸는 역활. 즉 번들링된 파일을 압축하거나, 파일 복사, 추출 등 부가작업을 하거나 파일별 커스텀 기능을 위해 사용.
  • output
    • 결과로 번들링된 파일의 이름과 해당 번들링 파일이 저장될 경로
    • entry에서 선언한 key의 이름이 [name]에 들어감
    • 즉 webpack을 수행하면 app.js라는 파일이 dist/ 폴더 안에 생성됨
• vue CLI 프로젝트 실행 시 npm run serve로 실행 시 webpack 기반으로 동작을 한다면 빌드 디렉토리가 생성되어야 할 것 같은데 빌드 디렉토리(/dist) 생성되지 않음. npm run build로 실행하면 루트에 dist 빌드 디렉토리 생성되고 하위에 결과 파일들 생성되어 있음
• npm run serve 실행 시는 빌드 결과물을 파일 시스템으로 생성하는 것이 아닌 '메모리'에 생성 함(빠른 Read/Write 가능)으로 소스 변경에 따른 빠른 반영 가능하다
• webpack은 js 코드만 , vue 코드는 vue-loader가 js 파일로 전환해주기 때문에 하나의 file로 합칠 수 있는것 (output)

 

<vue-style-loader>

vue 파일의 <style></style> 영역을 사용하기 위해 npm i vue-style-loader -D, npm i css-loader 설치,

webpack.config.js 에 module 추가

 

test:/\.css$/,
use:[
	'vue-style-loader',
    'css-loader'
  ]

 

<style scoped></style>

scoped 를 붙혀주면 해당 컴포넌트에만 css가 적용된다.