[vue.js] 모듈이 변경될때마다 자동으로 컴파일(compile)해주는 방법 (+새로고침 없이 변경내역 적용)

1. 모듈이 변경될때마다 자동으로 compile해주는 방법이다.

 

package.json에서 webpack 옆에 "--watch"를 붙인다.

{   "scripts": {     "build": "webpack --watch"   }, }

package.json 파일을 저장한 다음에 npm run build를 하고나서 "webpack is watching the files"라는 문구가 뜨면 성공한 것이다.

 

 

이 상태가 되면 모듈이 변경될 때마다 자동으로 compile 해줄 것이다.

 

 

2. 새로고침 없이 변경내역 적용방법

※ 변경내역없이 하는 작업은 로컬서버에서 진행가능합니다.

 

1) 로컬서버 준비 : package.json에서 dev를 추가한다.

{   "scripts": {     "build": "webpack --watch",     "dev": "webpack-dev-server --hot"   }, }

node.js command prompt에서 다음 명령어 입력

npm i -D webpack-dev-server

 

2) webpack.config.js의 output 속성에 publicPath를 추가한다.

※ 기존에 dist폴더가 있으면 지워준다.

module.exports = {    ...    output: {       ...       publicPath: '/dist'    } }

 

3) 서버 실행 : npm run dev