Webpack 4 - Bagaimana cara mengkonfigurasi meminimalkan?

Webpack 4 hadir dengan pernyataan berikut:

webpack.optimize.UglifyJsPlugin telah dihapus, gunakan config.optimization.minimize sebagai gantinya.

Cukup adil, tetapi saya tidak dapat menemukan informasi apa pun tentang konfigurasi instance UglifyJsPlugin yang berjalan di bawah kap, misalnya untuk mengubah direktori cache. Bisakah ini dilakukan?

Konfigurasi default tidak dapat diubah.

Anda dapat menggunakan optimization.minimizerpengaturan untuk membuat contoh Anda sendiri UglifyJsPlugin. Menggunakan 4.0 kami menggunakan contoh ini untuk mendapatkan peta sumber bahkan ketika modedisetel ke 'production'misalnya (tidak lagi diperlukan sejak 4.1.1):

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }
};

Tanpa menambahkan uglifyjs-webpack-plugin, Anda bisa menambahkan ini di akhir file webpack.prod.config.js Anda :

 optimization: {
   minimize: false
 }

Anda bisa mencobanya

npm install uglifyjs-webpack-plugin --save-dev

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

dokumentasi webpack

Lari saja:

yarn add uglifyjs-webpack-plugin --dev

Referensi: Jawaban Alfonso Pérez

Bagi mereka yang datang di belakang saya, menyadari kesalahan menyesatkan ini tidak terkait dengan konfigurasi webpack yang benar, tetapi sebenarnya, offline-pluginsudah ketinggalan zaman dan menyebabkan masalah ini. Itu perlu ditingkatkan. Lihat masalah github: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047

Anda harus memeriksa popsi: https://webpack.js.org/guides/production/#cli-alternatives : tanda ini memberi tahu Webpack untuk mengoptimalkan build Anda untuk lingkungan produksi. Anda dapat menggunakannya dengan "produksi" baru modeuntuk bangunan yang lebih kecil.