web-dev-qa-db-fra.com

TypeError: CleanwebpackPlugin n'est pas un constructeur

j'essaie de prévisualiser une application web vue via webpack-server-dev.Je suis ce guide https://medium.com/the-web-tub/ création-de-votre-première-vue-js-pwa-project-22f7c552fb34

Le guide explique que le plugin est utilisé pour supprimer les fichiers anciens et inutilisés dans le répertoire dist. J'ai déjà essayé de remplacer const CleanWebpackPlugin = require('clean-webpack-plugin') par const { CleanWebpackPlugin } = require('clean-webpack-plugin') ce que certains articles suggèrent. j'ai également essayé de regarder la documentation sur https://github.com/johnagan/clean-webpack-plugin mais sans succès car je suis assez nouveau dans ce domaine.

quand j'essaie de npm run dev je reçois cette erreur

    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)

et ceci est le fichier 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
  }
});

c'est l'erreur que j'obtiens lors de l'utilisation de la bonne importation comme expliqué dans la documentation:

      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)

si je supprime la ligne 56 dans webpack.config.js, je peux exécuter l'application Web sans problème, mais je veux comprendre la source de ce problème

javascriptvue.jswebpackwebpack-dev-server
37
ECallpani

La bonne consiste à utiliser cette importation:

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

Et puis au lieu de passer un tableau avec le dossier de distribution, changez-le en

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

J'ai eu le même problème et je l'ai résolu de la manière suivante:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin({
        cleanAfterEveryBuildPatterns: ['dist']
    })
]
20
Chester

Avec la mise à jour, vous devrez procéder comme suit pour l'inclure

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

Ensuite, dans le tableau des plugins remplacer, ajoutez ce qui suit

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

avec

plugins: [
     new CleanWebpackPlugin(),
]

Comme avec la mise à jour, il n'est pas nécessaire de passer de paramètres car il supprimera tous les fichiers du répertoire output.path Du webpack, ainsi que tous les actifs du webpack inutilisés après chaque reconstruction réussie.

14
Tom Maton

J'ai eu le même problème aujourd'hui, en ce moment. Comme vous pouvez le constater, il y avait un décalage entre les documents et le code réel. Et en fait, vous pouvez voir dans le dernier commit qu'ils ont fusionné à la fois dans la documentation:

enter image description here

et aussi au code:

enter image description here

Je viens donc de passer de const CleanWebpackPlugin = require('clean-webpack-plugin') à

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

et ça marche bien.

Je pense que vous avez peut-être été pris entre deux choses. Réinstallez le package npm et réessayez, cela devrait fonctionner.

J'ai écrit un peu de ce que vous pouvez voir dans leur référentiel public car très souvent, lorsque des changements soudains comme celui-ci se produisent, vous trouverez votre propre réponse dans le référentiel , probablement dans les derniers commits. Et c'est une bonne lecture d'un peu du code que vous utilisez, surtout si cela vous aide à résoudre votre problème :)

13
Carles Alcolea

Pour ceux qui trouvent cette erreur avec les mises à jour récentes de nativescript-vue , je l'ai corrigé en changeant webpack.config.js (fichier de niveau supérieur dans le dossier de l'application). Comme ci-dessus, il reflète maintenant la syntaxe du CleanWebpackPlugin docs .

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

et

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

Je ne connais pas très bien le webpack et je l'apprends actuellement

bien que cette chose ci-dessous m'a aidé à résoudre le problème

Je viens de désinstaller le plugin clean-webpack puis de réinstaller en tant que dépendance avant cela, je l'ai installé en tant que dépendance de développement

après avoir désinstallé et installé comme ça: npm install --save clean-webpack-plugin

et en ajoutant ceci

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

résolu mon problème !!

j'espère que ça aide

3
Amir Ali

CleanWebpackPlugin v3.0.0

Exportation par défaut remplacée par l'export nommé CleanWebpackPlugin

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

le bon code est:

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

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