web-dev-qa-db-ja.com

UglifyJSプラグインでWebpackを最適化するとランタイムエラーが発生する

Webpackにバンドルされている同形のReactアプリケーションがあります。

2つのバンドルされたファイル出力に対応する2つのエントリポイントがあります：vendors.jsおよびapp.js。

webpack-dev-serverを実行するとき、または最適化フラグなしでコンパイルするとき、すべて正常に動作します。ただし、glifyプラグインを使用しようとするとすぐに、コンパイルされた出力にエラーが含まれます。

私が試してみました：

webpack -p
webpack -optimize-minimize

または構成：

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

ただし、すべて同じランタイムエラー（未定義の変数）になります。

これを引き起こす可能性のある明らかなものはありますか？ Uglifyは熱心すぎて、すべきではないものを削除していますか？

javascriptreactjsuglifyjswebpack
37
duncanhall

問題はUglifyマングラーによって引き起こされていました。どの変数の名前変更が問題を引き起こしているかを知らずに、解決策はマングリングを完全にオフにすることでした：

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

これは Webpack Plugin として設定ファイルに追加する必要があります。例：

var config = {

  //... various config settings

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

マングルを無効にしても問題が解決しない場合は、-pパラメーターを使用してビルドするかどうかを確認してください。 -pも出力をマングルしますが、私の場合、UflifyJsPlugin mangleをfalseに切り替えて、-pフラグなしでビルドして動作させる必要がありました（jsの重みが約50増加します） ％）

1
mbegoc

次を使用してこれを修正しました（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）-trueを渡すと、Safari 10ループイテレータバグ「let変数を2回宣言できない」を回避できます。参照：safari10出力オプション。

また、これはoptimization.minimizer。 pluginsに入れるとうまくいきませんでした。

0
TurplePurtle