Vue - Webpack (2)

개발 서버 구성하기

webpack-dev-server: 개발 용도로 서버를 구성해서 진행할 수 있다.

npm i -D webpack-dev-server // webpack-dev-server 설치

package.json에 scripts 작성

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

터미널에 npm run dev를 입력하면 개발 서버가 열리는데 개발 서버는 코드를 변경하면 즉시 브라우저에 반영되는 장점이 있다. 이를 HMR(Hot Module Replacement)라고 한다.

또한 port: 8080으로 열리게 되는데 이를 변경할 수 있다. 하지만 권장은 8080이다.
webpack.config.js에 devServer 옵션 추가

devServer: {
    port: 1234,
  },

스타일 적용하기

sfc 파일에 style을 작성하면 에러가 발생한다.
webpack은 자바스크립트 내용만 이해할 수 있기 때문에 css 구문을 해석할 수 없다.
따라서 css 구문을 처리하기 위해 loader 패키지 설치가 필요하다.
css-loader: css를 해석할 수 있는 패키지
vue-style-loader: vue 파일에서 <style> 태그를 읽을 수 있는 패키지

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

webpack.config.js에서 loader를 연결한다.
이 때 먼저 해석되어야 하는 loader가 나중에 작성되어야 한다.

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"], // 여러 개니까 배열로 명시, 순서 중요
      },
    ],
  },

아래 예제를 살펴보면 다른 컴포넌트를 생성해서 App 컴포넌트로 불러왔다.

@vue/compiler-sfc 패키지로 인해 불러온 컴포넌트를 사용할 때 파스칼 케이스로 작성해도 상관없다.

그러나 브라우저를 보면 자식 컴포넌트의 style이 부모 컴포넌트까지 영향을 미치는 이상한 현상이 발생한다.

이 때는 scoped라는 옵션을 사용하면 된다.
sscoped는 style hash라는 속성을 태그에 적용하고 속성 태그를 통해 style을 적용한다. 그래서 다른 컴포넌트에 영향을 주는 것을 방지할 수 있다.
특별한 상황이 아니면 scoped 옵션을 추가해서 컴포넌트를 만드는 것을 권장한다.

<style scoped>
h1 {
  color: royalblue;
}
</style>

SCSS 사용하기

마찬가지로 해당 패키지와 loader가 필요하다

npm i -D sass sass-loader

loader 연결

module: {
    rules: [
      {
        test: /\.s?css$/, // s가 있거나 없거나 읽음
        use: ["vue-style-loader", "css-loader", "sass-loader"], // 여러 개니까 배열로 명시, 순서 중요
      },
    ],
  },

style 태그에 lang="scss" 작성

<style scoped lang="scss">
$color: orange;
h1 {
  color: $color;
}
</style>

경로 별칭을 통해 컴포넌트를 절대 경로로 가져오기

현재 App 컴포넌트를 보면 Hello 컴포넌트를 상대 경로로 가져오고 있다.

이는 추후에 파일 위치가 변경되면 문제가 발생할 수 있다.

따라서 절대 경로로 작성하는 것이 권장되는데 webpack에서는 경로 별칭이라는 것을 제공한다.

또한 확장자를 생략할 수 있는 기능도 제공한다.

이제 이런식으로 컴포넌트를 가져올 수 있다.

import Hello from "~/components/Hello";

파비콘 적용하기

마찬가지로 필요한 플러그인이 있다.

플러그인 설치

npm i -D copy-webpack-plugin

플러그인 적용

추가로 index.html 주변에 ico확장자를 가진 favicon 파일이 존재하면 index.html에 파비콘이 지정되어 있지 않아도 favicon.ico 파일을 찾아서 적용한다.