혼자 적어보는 노트

Webpack Vue SFC 환경 설정 본문

기타

Webpack Vue SFC 환경 설정

jinist 2022. 5. 11. 22:55

 

 

💻 기본 환경 설정

 

package.json 파일 생성

npm init -y

 

 

현재 프로젝트에 webpack설치

npm i -D webpack webpack-cli

 

 

루트 경로에 webpack.config.js 파일 생성

const path = require("path");

module.exports = {
  entry: "./src/main.js", // 진입점
  output: {
    path: path.resolve(__dirname, "dist"), // 반환되는 경로
    clean: true, // true 시 매번 dist폴더를 정리
    // filename: '', // 반환되는 파일의 이름. 생략 시 entry의 파일 명으로 지정
  },
};

path의 경우 최종 결과를 내는 파일이 webpack.config.js가 아닐 수 있기 때문에

절대 경로로 입력을 해주어야 하며 제공되는 path.resolve를 사용한다.


* entry를 제외한 나머지 경로를 사용할 때는 path.resolve를 사용하는 것을 권장

* 플러그인에는 보통 path.resolve기능이 내장되어 있

 

 

src폴더 생성 후 하위 파일들 생성

src

ㄴ App.vue

ㄴ index.html

ㄴ main.js

index.html

webpack.config.js

 

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

* 현재 script태그가 없지만 build시에 자동으로 추가가 된다.

 

main.js

import * as Vue from "vue";
import App from "./App.vue";

Vue.createApp(App).mount("#app");

 

App.vue

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello~",
    };
  },
};
</script>

 

 

Vue 설치

최신 버전의 vue를 설치해준다.

npm i vue@next

 * vue 3.2.13 이상 버전에는 컴파일러가 내장되어 있지만

그 이전 버전의 경우 설치한 vue버전과 일치하는 @vue/compiler-sfc 패키지를 설치해주어야 한다. 

 

 

vue-loader 설치

vue 확장자를 읽을 수 없기 때문에 다른 확장자를 해석할 수 있는 loader가 필요하다.

vue-loader 15버전의 경우 vue2의 loader이기 때문에 최신버전으로 받아준다.

* npm info vue-loader로 버전 정보 확인 후 알맞게 설치

npm i -D vue-loader@next

 

 

html-webpack-plugin 설치

dist 폴더 자체를 배포하려면 dist 폴더 안에 index.html파일도 들어가야 하기 때문에
html 파일을 가공해서 dist 폴더에 옮겨줄 플러그인을 설치한다.

npm i -D html-webpack-plugin

 

 

loader와 플러그인 등록

webpack.config로 돌아가서 module의 rules에 변환할 파일 내용을 입력해주고

plugins 부분에 loader와 html 플러그인을 등록해준다.

const { VueLoaderPlugin } = require('vue-loader');
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
...
  module:{
    rules: [
      {
        test: /\.vue$/, // vue확장자를 가진 파일. 정규표현식의 test메소드와 같음
        use: 'vue-loader' // 사용할 loader 지정
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: "src/index.html", // 해석할 Html 파일의 위치
    }),
  ]
 }

* HtmlPlugin에는 path.resolve기능이 들어있기 때문에 경로부분만 입력하면 된다.

 

mode설정

mode옵션은 webpack.config에서 직접 작성해서 설정할 수도 있지만
package.json의 scripts옵션에서 지정할 수 있다.

 

  "scripts": {
    "build": "webpack --mode production"
  },

* build를 할 경우 production 모드

 

 

확장자 생략 설정

resolve 옵션의 extensions 옵션으로 파일을 import할 때 생략할 확장자를 지정해 줄 수 있다.

  resolve:{
    extensions: ['.vue', '.js'],
  },

 

경로 별칭 설정

프로젝트가 커지면 폴더의 깊이가 깊어지면서 절대경로를 써주어야 하는데

resolve 옵션의 alias 옵션으로 경로 별칭을 지정해줄 수 있다

  resolve:{
    extensions: ['.vue', '.js'],
    alias: {
      '~': path.resolve(__dirname, 'src') //~ 사용 시 src폴더부터 탐색 가능
    }
  },

~/App의 경우 /src/App을 의미하게 된다.

 

 

🔨 개발 서버 세팅

 

webpack-dev-server 설치

bulid가 아닌 개발을 하며 확인을 하는 용도인 개발 서버 패키지 설치

npm i -D webpack-dev-server

 

scripts 옵션 설정

설치 후 package.json의 scripts 옵션에 dev를 아래와 같이 추가한다.

  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

npm run dev 를 입력하면 개발서버가 오픈된다.
* 포트번호를 변경하고 싶다면 webpack.config.js에서 지정해 줄 수 있다.

  devServer: {
    port: 3040, // 기본 서버는 8080
  },

 

✨ 추가 설정

 

CSS Loader 추가

css파일을 읽기위한 css-loader와

vue 파일 내부의 style태그로 감싸진 부분을 읽기위한 vue-style-loader 설치한다.

npm i -D css-loader vue-style-loader

설치 완료 후 webpack.config.js 안의 module의 rules 부분을 추가한다.

  {
    test: /\.css$/,
    use: ["vue-style-loader", "css-loader"], 
  },

❗❗ 복수의 경우 배열로 선언하며, 배열 순서 중 뒤에 작성한 것이 먼저 해석이 된다.

 

 

Sass Loader 추가

scss파일을 읽기 위해 sass와 sass-loader를 설치한다.

npm i -D sass sass-loader

 

기존의 rules의 css를 설정한 부분 수정.

{
    test: /\.s?css$/,
    use: ['vue-style-loader', 'css-loader', 'sass-loader'],
}

css확장자 뿐만 아니라 scss확장자를 가진 파일도 읽어야 하기 때문에 ?를 추가하고

sass-loader를 먼저 읽어야 하기 때문에 맨 끝에 추가한다.

 

 

정적 이미지 복사 플러그인 추가

js, html파일 외에도 배포 시에는 정적 파일들도 가져와야하는데
copy-webpack-plugin를 통해 지정한 폴더 안의 파일들을 복사해서 가지고 올 수 있다.

npm i -D copy-webpack-plugin

 

 

webpack.config.js에서 설치한 플러그인을 적용한다.

const CopyPlugin = require("copy-webpack-plugin");


... //plugins 옵션에 추가

new CopyPlugin({
      patterns: [
        { from: "static" }, // to 옵션이 있지만 생략 시 dist폴더로 지정
      ],
    }),

위와 같이 작성 시 build 시 static에 있는 파일을 dist 폴더로 복사시켜준다.

'기타' 카테고리의 다른 글

ESlint vue/multi-word-component-names 옵션 끄기  (0) 2022.05.13
Vue 프로젝트에 ESlint 적용  (0) 2022.05.12
Parcel Vue SFC 환경 설정  (0) 2022.05.11
git 원격 저장소 여러 개 연결하기  (0) 2022.05.08
private repository clone 안될 때 / remote: Repository not found.  (0) 2022.03.26
'기타' Related Articles more
Comments