Uglify를 통한 웹 팩 최적화JS 플러그인으로 인해 런타임 오류가 발생함

Uglify를 통한 웹 팩 최적화JS 플러그인으로 인해 런타임 오류가 발생함

웹 팩을 통해 번들되는 동형 React 어플리케이션을 가지고 있습니다.

2개의 번들 파일 출력에 대응하는 2개의 엔트리 포인트가 있습니다.vendors.js그리고.app.js.

webpack-dev-server를 실행하는 경우 또는 최적화 플래그를 사용하지 않고 컴파일 하는 경우 모두 정상적으로 동작합니다.그러나 Uglify 플러그인을 사용하려고 하면 컴파일된 출력에 오류가 발생합니다.

시도했습니다.

webpack -p
webpack -optimize-minimize

또는 설정:

new webpack.optimize.UglifyJsPlugin({sourceMap:false})

그러나 모두 동일한 런타임 오류(정의되지 않은 변수)가 발생합니다.

원인이 될 수 있는 명백한 것이 있습니까?Uglife가 과용되어 있으면 안 되는 것을 제거하고 있는 것입니까?

문제는 Uglife 망글러에 의해 발생하였습니다.문제의 원인이 되고 있는 변수 이름을 알 수 없는 상황에서 해결 방법은 망글링을 완전히 끄는 것이었습니다.

new webpack.optimize.UglifyJsPlugin({
  sourceMap: false,
  mangle: false
})

이것은 Webpack 플러그인으로 설정 파일에 추가해야 합니다.다음은 예를 제시하겠습니다.

var config = {

  //... various config settings

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      mangle: false
    })
  ]
};

망글을 비활성화했는데도 문제가 있는 경우 -p 파라미터를 사용하여 빌드하는지 확인합니다.출력도 엉망인 것 같습니다.저 같은 경우에는 UflifyJsPlugin 망글을 false로 전환하고 -p 플래그를 사용하지 않고 빌드해야 했습니다(js의 무게가 약 50% 증가).

다음을 사용하여 이 문제를 해결했습니다(Webpack 4.5를 사용하고 있습니다.

var config = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          safari10: true,
          mangle: {
            safari10: true,
          }
        }
      })
    ]
  }
};

https://github.com/mishoo/UglifyJS2/tree/harmony#mangle-options 에서 :

safari10(기본값 false) - Safari10 루프 반복 버그 "Cannot declarize a let variable displete double"을 회피하려면 true를 사용합니다.safari10 출력 옵션도 참조해 주세요.

또, 이것이 들어가는 것에 주의해 주세요.optimization.minimizer제가 넣었을 때 잘 안 되더라고요plugins.

언급URL : https://stackoverflow.com/questions/30322921/webpack-optimize-with-uglifyjs-plugin-causes-runtime-error