Webpack 4 - Как настроить минимизацию?

Webpack 4 содержит следующее заявление:

webpack.optimize.UglifyJsPlugin был удален, используйте вместо него config.optimization.minimize.

Достаточно честно, но я не могу найти никакой информации о настройке экземпляра UglifyJsPlugin, работающего под капотом, например, для изменения каталога кеша. Это можно сделать?

Изменить конфигурацию по умолчанию невозможно.

Однако вы можете использовать этот optimization.minimizerпараметр для создания собственного экземпляра UglifyJsPlugin. Использование 4.0 мы использовали этот пример , чтобы получить исходный код карты , даже если modeустановлено значение 'production', например (больше не требуется , как в 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
      })
    ]
  }
};

Не добавляя uglifyjs-webpack-plugin, вы можете просто добавить это в конец вашего файла webpack.prod.config.js :

 optimization: {
   minimize: false
 }

Вы можете попробовать это

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

webpack.config.js

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

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

документация webpack

Просто беги:

yarn add uglifyjs-webpack-plugin --dev

Ссылка: ответ Альфонсо Переса

Те, кто следуют за мной, осознают, что эта вводящая в заблуждение ошибка не связана с моей правильной конфигурацией веб-пакета, но на самом деле offline-pluginон устарел и вызывает эту проблему. Его нужно было обновить. См. Проблему с github: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/234#issuecomment-369134047

Вы должны проверить pопцию: https://webpack.js.org/guides/production/#cli-alternatives : этот флаг указывает Webpack оптимизировать вашу сборку для производственной среды. Вы можете использовать его с новой «производственной» modeдля сборки меньшего размера.