javascript - 无法将我的应用程序部署到 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 文档更新了一些部分，但仍然是同样的错误。

标签： javascriptreactjsgitherokuwebpack

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'
 }),

我没有使用过 webpack 合并，所以我要补充一点，你应该确保你有正确的依赖项，安装，以及是否有任何冲突。

需要注意的是：使用零配置，clean-webpack-plugin 将删除您指定的路径目录中的文件。