Не могу развернуть мое приложение в Heroku. Ошибка: clean-webpack-plugin принимает только объект параметров

Question

const path = require("path");
const webpackMerge = require("webpack-merge");
const autoprefixer = require("autoprefixer");
const webpackCommon = require("./common.config");

// webpack plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin");

module.exports = webpackMerge(webpackCommon, {
  bail: true,

  devtool: "source-map",
  mode: "production",
  output: {
    path: path.resolve(__dirname, "../dist"),

    filename: "[name]-[hash].min.js",

    sourceMapFilename: "[name]-[hash].map",

    chunkFilename: "[id]-[chunkhash].js",

    publicPath: "/"
  },

  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                importLoaders: 2
              }
            },
            {
              loader: "postcss-loader",
              options: {
                config: {
                  path: path.resolve(__dirname, "postcss.config.js")
                },
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                outputStyle: "expanded",
                sourceMap: true,
                sourceMapContents: true
              }
            }
          ]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, "../static/index.html"),
      favicon: path.resolve(__dirname, "../static/favicon.ico"),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new CopyWebpackPlugin([{ from: path.resolve(__dirname, "../static") }], {
      ignore: ["index.html", "favicon.ico"]
    }),
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname, '..'),
      exclude: '.gitignore'
}),
    new DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new ExtractTextPlugin("[name]-[chunkhash].min.css"),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          ie8: true,
          warnings: false
        },
        mangle: {
          ie8: true
        },
        output: {
          comments: false,
          ie8: true
        }
      },
      sourceMap: true
    }),
    new LoaderOptionsPlugin({
      options: {
        context: "/",
        sassLoader: {
          includePaths: [path.resolve(__dirname, "../src")]
        }
      }
    })
  ]
});

Невозможно развернуть мое приложение в Heroku. Ошибка: clean-webpack-plugin принимает только объект параметров. Любая идея, которая поможет мне решить эту ошибку? Я проверил документацию clean-webpack-plugin, обновил некоторые части, но ошибка все еще та же.

Answer 1

Взгляните на дополнительные конфигурации clean-webpack-plugin. Ваш CleanWebpackPlugin выдает эту ошибку:

    constructor(options: Options = {}) {
        if (isPlainObject(options) === false) {
          throw new Error(`clean-webpack-plugin 
         // only accepts an options object. See:
         // https://github.com/johnagan/clean- 
         // webpack-plugin#options-and-defaults- 
         // optional`);
        }
    }

Вы пытались добавить параметры CleanWebpackPlugin в файл webpack.config? Примерно так:

 const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        /**
       * All files inside webpack's output.path 
        directory will be removed once, but the
       * directory itself will not be. If using 
       webpack 4+'s default configuration,
       * everything under <PROJECT_DIR>/dist/ 
       will be removed.
     * Use cleanOnceBeforeBuildPatterns to override 
     this behavior.
     *
     * During rebuilds, all webpack assets that are 
     not used anymore
     * will be removed automatically.
     *
     * See `Options and Defaults` for information
     */
        new CleanWebpackPlugin(),
    ],
 };

module.exports = webpackConfig;

Если все остальное терпит неудачу, взгляните на полные Параметры / Стандартные параметры для CleanWebpackPlugin. Я думаю, что вы можете удалить [dist] и просто передать объект конфигурации: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

Я думаю, что эта часть вашего кода может быть проблематичной. Попробуйте без ['dist']:

    new CleanWebpackPlugin(['dist'], {
  root: path.resolve(__dirname, '..'),
  exclude: '.gitignore'
 }),

Я не работал со слиянием веб-пакетов, поэтому я хотел бы добавить, что вы должны убедиться, что у вас есть правильные зависимости на месте, установлены и есть ли какие-либо конфликты.

Что следует отметить: при нулевой конфигурации, clean-webpack-plugin удалит файлы в указанном вами пути.