고두

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

  ​

에러 메세지

 
ERROR in main.js from UglifyJs
Unexpected token: name (urlParts) [main.js:1046,4]
webpack: Failed to compile.

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

  •  
    {
        test: /\.js$/,
          use: [{ loader: 'babel-loader', options: { cacheDirectory: true } }],
          exclude: /node_modules(?!\/webpack-dev-server)/,
    },