Webpack-dev-server를 사용한 웹팩 빌드 오류.md

Webpack-dev-server를 사용한 웹팩 빌드 오류

Bulid succeeding with webpack fails with webpack-dev-server (Unexpected token)

 

webpack/webpack-dev-server GIT 페이지의 issues를 참고했습니다.

링크 - https://github.com/webpack/webpack-dev-server/issues/1101

실행 환경 - 오류가 발생한

  • OS : Ubuntu 16.04 LTS

  • Node version : 8.2.1

  • NPM version : 5.6.0

  • webpack version : 3.10.0

  • webpack-dev-version : 2.10.0

에러 메세지

 

webpack을 이용한 빌드는 성공적으로 이루어졌음에도 불구하고 동일한 환경에서 webpack-dev-server를 사용하여 시작했을 때, 위와 같은 에러 메세지를 볼 수 있습니다.

 

에러 추적

  • npm install [dependencies] (의존성 설치)

  • npm list webpack

  • npm list webpack-dev-server (2.10.0이 최신 버전이지만 2.8.0 or 2.8.1 부터 위와 같은 오류 발생)

  • package.json에서 일반적으로 두 가지의 script를 작성합니다.

    • npm run build : 웹팩을 사용한 번들링의 경우 성공적으로 빌드됩니다.
    • npm start : 동일한 환경으로 webpack-dev-server를 사용하여 빌드했을 경우 예외적으로 오류가 발생합니다.

에러 원인

확실하게 원인에 대해 알지 못 하지만 webpack-dev-server의 최신 버전의 경우 ES6(es2015)를 지원하는 반면에 UglifyJS-Plugin은 ES6를 지원하지 않기 때문에 발생하는 오류로 예상하고 있습니다.

현재 uglifyjs-webpack-plugin의 경우 ES6을 지원한다고 합니다. 다만 uglifyjs의 추가 설치 단계가 필요합니다.

 

해결 방법

이러한 문제는 webpack-dev-server 2.8.0에서 나타나는 오류라고 합니다. 검증을 위해

  • npm install webpack-dev-server@~2.7.0
  • npm start

webpack-dev-server version을 2.7.1로 다운그레이드 시킴으로써 간단히 해결할 수 있습니다.

 

그 외 해결 방법들

  • install UglifyJS-Plugin separately

  • temporarily remove UglifyJS-plugin until webpack includes an es6-capable version

  • transpile webpack-dev-server

    •  

 

+ Recent posts