TIL 31일차 (npm)

개발서버 오픈 장점

npm run dev와 같은 명령어로 localhost:8080에서 작업을 하면 코드만 수정해도 반영된다.

devServer

webpack.config.js에서 localhost 기본 8080을 다른 숫자로 설정할 수 있다.

css-loader , vue-style-loader

webpack은 js만 이해 할 수 있어서
css를 이해하려면 css-loader를 설치 필요하다.

해당 내용을 webpack.config.js의 use에 작성할 경우 아래(늦게작성)부터 작동된다.

sass sass-loader

css만이 아니라 scss도 동작시키기위한 모듈

webpack.config.js의 작성을 할 때

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

1. css와 scss를 모두 동작시키기 위해 s?를 통해 s가 앞에 있든 없든 동작시킨다.
2. use의 아래부터 동작시키므로 scss면 sass-loader를 하고 css면 css-loader를 진행하고 그 후 vue-style-loader를 진행시킨다.

하위컴포넌트의 style과 상위컴포넌트의 style

기본적으로 <style scoped>를 하위 컴포넌트에서 작성하지않으면 상위 컴포넌트의 style에 까지 영향을 끼친다.

style scoped를 통해 속성선택자가 추가되어 각각의 컴포넌트마다 style이 영향을 끼치지않는다.

resolve 속성

webpack.config.js에서 사용되어
1. extensions를 통해 모듈의 파일확장자를 생략할 수 있게한다.
2. alias를 통해 별칭을 지어 경로를 적용시킨다.
(상대경로의 경우 경로가 변하면 오류가 발생할 가능성이 높기때문)