[2019.04.21] Webpack 사용법 #3 - 브라우저 자동 동기화 browser-sync

이전에 bundle 작업을 자동으로 활성화 해주는 것을 해보았다. 그러나 코드를 저장하고 브라우저에서 반영된 내용을 확인하기 위해서는 새로고침을 해야 했다.

 

이번에는 새로고침을 하지 않아도 코드를 수정 후 저장만 하면 바로 브라우저에서 반영이 되는 sync browser 모듈을 사용하는 법을 알아볼 것이다.

#sync browser 모듈 설치

npm install -D browser-sync browser-sync-webpack-plugin

 

 sync browser는 webpack과 함께 사용할 것이므로, browser-sync와 같이 browser-sync-webpack-plugin을 같이 설치해준다.

 

package.json

 

모듈을 설치하면, package.json 파일에서 devDependecies에 모듈 버전을 확인할 수 있다. 그러면 정상적으로 browser-sync가 설치된 것이다.

 

이젠 설치한 browser-sync를 사용할 수 있도록 webpack.config.js 파일에 추가해 줘야한다.

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); // 설치한 모듈을 가져온다.
module.exports = {
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  watch:true,
  
  // 추가 부분
  plugins: [
    new BrowserSyncPlugin({
      host: 'localhost',  //localhost로 사용
      port: 3000,			//포트 3000을 사용  (이미 사용중이면 1씩 증가된 포트로 사용)
      files: ['./dist/*.html'], //해당 경로 내 html 파일이 자동으로 동기화 (이 부분이 없으면 html파일 변경사항은 자동 동기화 안됨)
      server: {baseDir: ['dist']} // server의 Base 디렉토리를 dist로 지정
    })
  ]
}

 

이후에 index.html 파일을 dist 디렉토리로 옮겨준다. 일반적으로 react-create-app 등 과 같이 프로젝트 구조에 최상위 스크립트는 dist라는 디렉토리에 넣어서 사용한다나..(?)

/dist/index.html

 

우선 files의 경로를 저렇게 잡았으니, index.html파일을 dist 디렉토리로 옮긴 후, bundle.js 파일을 참조하던 scr 경로를 다시 잡아준다.

그리고 webpack 명령어를 실행시키면!!

 

 

짜잔!! 서버가 실행되면서 index.html 파일이 브라우저에 나타난다. 

그리고 html파일 ,js 파일을 수정하고 저장하면 바로 브라우저에 동기화 되서 새로고침을 하지 않고도 바로 확인할 수 있다

 

참고 ) webpack을 실행 중, webpack.config.js 파일을 수정하면 webpack을 다시 실행 시켜주어야 함.