Используйте плагин terser webpack вместо uglify при копировании источников через плагин

#webpack #bundling-and-minification #webpack-4 #uglifyjs #terser

#webpack #объединение и минимизация #webpack-4 #uglifyjs #краткий

Вопрос:

У меня есть следующие пакеты в моем webpack.config.js :

 const CopyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const UglifyJS = require("uglify-es");
  

И это часть моей конфигурации, которая использует эти пакеты:

   optimization: {
    minimizer: [new TerserPlugin()],
  },
  plugins: {
    new CopyWebpackPlugin([
      {
        from: "./node_modules/whatwg-fetch/dist/fetch.umd.js",
        to: "./js/polyfills/whatwg-fetch.js",
        transform: content => UglifyJS.minify(content.toString()).code,
      },
    ]),
  }
  

Таким образом, я минимизирую свои общие пакеты с помощью terser и предоставляю минимизацию через uglify для источников, которые копируются copy-webpack плагином. Я хочу избавиться от uglify и заменить его на terser , поскольку они оба используются для минимизации. Возможно ли это? Можно ли использовать terser плагин вне optimization раздела конфигурации? Или, может быть, я могу каким-то образом сказать ему, чтобы он также минимизировал мои скопированные вручную источники?

Ответ №1:

Решение оказалось простым. Поскольку он terser-webpack-plugin включает terser в себя, его можно использовать автономно.

 const CopyWebpackPlugin = require("copy-webpack-plugin");
const Terser = require("terser");
  

И нет необходимости добавлять terser в список зависимостей! Тогда мы можем использовать его явно, когда захотим:

   plugins: {
    new CopyWebpackPlugin([
      {
        from: "./node_modules/whatwg-fetch/dist/fetch.umd.js",
        to: "./js/polyfills/whatwg-fetch.js",
        transform: content => Terser.minify(content.toString()).code,
      },
    ]),
  }