webpack 자동 빌드, dev-server : [ npm ]

안녕하세요.

webpack에서 제공하는 자동 빌드와 dev-server 옵션 추가에 대해 기록하고자 합니다.

먼저 저는 기본적으로 intellij 를 사용하고 있습니다. 이 IDE 툴은 자동 저장은 있지만, live server 같은 기능은 없습니다. (제가 모르는 것일 수 있습니다.)

간단한 html을 작성할 때에는 visual studio code에 plugin인 Live Server를 추가하여 활용합니다.

명령어

Alt + L, Alt + O

 

주로 java 기반의 server 쪽 로직을 다루기에 이번 Vue 공부를 시작으로 front 쪽 편의 기능들을 기록하게 되었습니다.

---

webpack auto build

npm run build

기본적으로 webpack의 관리로 front 코드가 수정되면 위의 명령어로 빌드를 해주어야 수정된 코드가 반영되는데요,

코드를 수정하면 자동으로 빌드하라는 자동화 시스템입니다. 이 기능을 추가하면 소스를 고쳤을 때 build를 알아서 하는 것입니다.

 

package.json

npm install을 하게되면 생성되는 package파일에 옵션을 추가해주면 됩니다.

...

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

• 처음 install 시 build는 test라는 키워드로 되어 있을 수 있고 값은 echo --- 일 수 있습니다.
• 소스를 수정 후 npm run build 사용자가 직접 입력할 때에는 --watch가 없었습니다.
• --watch 옵션을 추가하여 npm run build 를 입력하면 명령어는 계속 실행중 상태가 됩니다.

위 설정 후 소스코드를 수정하고 build error 여부를 확인하고, 오류가 없다면 브라우저에서 새로고침 후 로직을 확인하면 됩니다.

 

자동화를 경험하면 새로고침도 번거로워집니다.

---

webpack-dev-server

npm run dev

 

소스가 수정되면 build -> reload를 지원하는 node server입니다.

설치

npm i webpack-dev-server

 

1. 설정: package.json

...

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

• scripts에 dev라는 키워드로 webpack-dev-server --hot을 추가해줍니다.
• --hot은 option입니다.

 

2. 설정: webpack.config.js

...

    output: {
		...
        
        //add webpack-dev-server
        publicPath: '/dist'
    }
    
...

• publicPath: 의 value에는 root directory를 입력해주시면 됩니다.
• 현재 index.html 페이지에서 app.js를 호출할 때의 경로입니다.
  • ./dist/app.js

 

자동 빌드와 dev-server는 같이 활용하는 것이 아닌, dev-server가 자동 빌드를 포함하고 있는 관계입니다.

dev-server를 활용하실 때에는 자동 빌드는 굳이 필요하지 않습니다.

 

webpack dev server 설정이 끝난 후

1. npm run build
2. npm run dev

두 명령어를 실행하시면 dev server가 실행됩니다.

감사합니다.