똑같은 삽질은 2번 하지 말자
vue-cli 와 webpack 설정 본문
개요
vue-cli로 만든 프로젝트에서 webpack 설정을 변경하는 방법
이번에 webpack-bundle-analyzer을 써서 프로젝트의 번들사이즈를 분석해서 좀 줄이고자 해서 플러그인으로 추가하려고 하니
이 프로젝트는 vue-cli 4.x 로 생성한거라 webpack설정파일이 따로 존재하지 않았다? 그렇다 vue-cli 3.0이상으로 프로젝트를 생성했으면 webpack은 외부로 노출되어 있지않다.
잠깐 vue-cli 2 버전대와 그 이상을 비교해 보자면
| vue-cli 2.x | vue-cli 3.0 이상 | |
| Command | vue init | vue create |
| webpack 설정파일 | 있음 | 없음 |
| 기본 생성 파일 | 그냥 깃헙 템플릿 다운 git clone 느낌 |
플러그인으로 이것저것 기능 추가가 가능 |
| ES6 문법 | 거의 없는듯하다 | 많다 |
vue-cli3 에서 webpack설정을 변경하고 싶을때는?
vue.config.js에서 해주면 된다!
vue.config.js
https://cli.vuejs.org/config/#vue-config-js
Configuration Reference | Vue CLI
Configuration Reference Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with yo
cli.vuejs.org
본인의 (vue-cli를 써서 만든)프로젝트에서 웹팩설정을 알고 싶을 때는
$ vue inspect > output.js스샷처럼 파일이 생긴다.
output.js 내용은 이러하다 (꽤 크다..?)
참고 자료
Project Setup | Cracking Vue.js
Vue CLI로 생성한 프로젝트의 웹팩 설정 방법 Vue CLI로 생성한 프로젝트에 웹팩 설정을 변경하려면 어떻게 해야 할까요? 웹팩 설정 확인 & 변경 방법에 대해 알아봅니다. Vue CLI로 생성한 프로젝트와
joshua1988.github.io
웹팩으로 Vue.JS 번들 크기를 줄이는 방법
필자는 Stanley Black & Decker의 Industry 4.0 팀에서 일하고 있다. 최근 우리 팀은 세계적인 Stanley의 제조 공장을 위해 앱 스토어와 같은 것을 만들었다.
ui.toast.com
'Vue' 카테고리의 다른 글
| Vuex에 대한 고민 (0) | 2021.11.14 |
|---|---|
| vue(vue-cli)에서 component preload prefetch 기능 끄기 (0) | 2021.11.03 |
| Typescript + Vue (0) | 2021.10.10 |
| Nuxt 정리 No.4 (Nuxt LifeCycle, nuxtServerInit 정리) (0) | 2021.10.09 |
| Nuxt 에서 fontawesome 도입하기 (0) | 2021.08.28 |
