TypeError: CleanwebpackPlugin ist kein Konstruktor

Ich versuche, eine Vorschau einer Vue-Webanwendung über webpack-server-dev anzuzeigen. Ich folge dieser Anleitung
https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

Die Anleitung erklärt, dass das Plugin verwendet wird, um alte und nicht verwendete Dateien im dist-Verzeichnis zu löschen. Umtausch habe ich schon probiert const CleanWebpackPlugin = require('clean-webpack-plugin') mit const { CleanWebpackPlugin } = require('clean-webpack-plugin') was einige Beiträge vermuten lassen. Ich habe auch versucht, mir die Dokumentation anzusehen https://github.com/johnagan/clean-webpack-plugin aber ohne Erfolg, da ich ziemlich neu bin.

wenn ich es versuche npm run dev Ich bekomme diesen Fehler

    new CleanWebpackPlugin(['dist']),
    ^

TypeError: CleanWebpackPlugin is not a constructor
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

und das ist die Datei webpack.config.js

const path = require('path')

const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = (env, argv) => ({
  mode: argv && argv.mode || 'development',
  devtool: (argv && argv.mode || 'development') === 'production' ? 'source-map' : 'eval',

  entry: './src/app.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  node: false,

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
        exclude: /\.module\.css$/
      }
    ]
  },

  resolve: {
    extensions: [
      '.js',
      '.vue',
      '.json'
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'src')
    }
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'static', 'index.html'),
      inject: true
    }),
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'static'),
      to: path.resolve(__dirname, 'dist'),
      toType: 'dir'
    }])
  ],

  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    },
    mangleWasmImports: true,
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true
  },

  devServer: {
    compress: true,
    host: 'localhost',
    https: true,
    open: true,
    overlay: true,
    port: 9000
  }
});

Dies ist der Fehler, den ich bekomme, wenn ich den richtigen Import verwende, wie in der Dokumentation erläutert:

      throw new Error(`clean-webpack-plugin only accepts an options object. See:
      ^

Error: clean-webpack-plugin only accepts an options object. See:
            https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional
    at new CleanWebpackPlugin (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\clean-webpack-plugin\dist\clean-webpack-plugin.js:27:13)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\webpack.config.js:56:5)
    at handleFunction (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at Object.<anonymous> (C:\Users\Eson\Desktop\pwa-vue-app-1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:79:40)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19) 

Wenn ich Zeile 56 in webpack.config.js lösche, kann ich die Webanwendung ohne Probleme ausführen, aber ich möchte die Ursache dieses Problems verstehen

Der richtige ist, diesen Import zu verwenden:

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

Und dann, anstatt ein Array mit dem Distributionsordner zu übergeben, ändern Sie es in

plugins: [
     new CleanWebpackPlugin(),
     //...
]

Ich hatte das gleiche Problem und habe es folgendermaßen gelöst:

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

    plugins: [
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['dist']
        })
    ]

Ich hatte heute genau das gleiche Problem. Wie Sie sehen können, gab es eine Diskrepanz zwischen den Dokumenten und dem tatsächlichen Code. Und tatsächlich kann man hineinsehen das letzte Commit, das sie zusammengeführt haben beides zur Dokumentation:

und auch zum Code:

Also bin ich einfach umgestiegen const CleanWebpackPlugin = require('clean-webpack-plugin') zu

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

und es funktioniert gut.

Ich denke, Sie sind vielleicht zwischen den Dingen gefangen. Installieren Sie das npm-Paket neu und versuchen Sie es erneut, es sollte funktionieren.

Ich habe ein bisschen von dem geschrieben, was Sie in ihrem öffentlichen Repository sehen können, denn sehr oft, wenn plötzliche Änderungen wie diese passieren, werden Sie es tun Finden Sie Ihre eigene Antwort im Repo, wahrscheinlich in den letzten Commits. Und es ist gut, ein wenig von dem Code zu lesen, den Sie verwenden, besonders wenn es Ihnen hilft, Ihr Problem zu beheben 🙂

Mit dem Update müssen Sie Folgendes tun, um es einzuschließen

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

Fügen Sie dann im Array der Plugins Folgendes hinzu

plugins: [
     new CleanWebpackPlugin(['dist]),
]

mit

plugins: [
     new CleanWebpackPlugin(),
]

Da beim Update keine Parameter übergeben werden müssen, werden alle Dateien in den Webpacks entfernt output.path Verzeichnis sowie alle ungenutzten Webpack-Assets nach jedem erfolgreichen Neuaufbau.

Für diejenigen, die diesen Fehler bei den letzten Updates finden nativescript-vueich habe es durch Ändern behoben webpack.config.js (Datei der obersten Ebene im App-Ordner). Wie oben spiegelt es jetzt die Syntax im CleanWebpackPlugin wider Dokumente.

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

und

//new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
  new CleanWebpackPlugin(),

Verwenden Sie beim Importieren { CleanWebpackPlugin } anstelle von CleanWebpackPlugin

Dies passiert, wenn die Version größer als 1 ist.

Beispiel:

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

CleanWebpackPlugin v3.0.0

Der Standardexport wurde durch den benannten Export CleanWebpackPlugin ersetzt

[https://github.com/johnagan/clean-webpack-plugin/releases/tag/v3.0.0]

korrekter Code ist:

// es modules
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

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