javascript TypeError: CleanwebpackPlugin कंस्ट्रक्टर नहीं है




vue.js webpack-dev-server (4)

लगता है जैसे डॉक्स टूट गए हैं, सही कोड है

const CleanWebpackPlugin = की आवश्यकता है ('स्वच्छ-वेबपैक-प्लगइन')

मैं वेबपैक-सर्वर-देव के माध्यम से एक वीयू वेब एप्लिकेशन का पूर्वावलोकन करने की कोशिश कर रहा हूं। मैं इस गाइड का अनुसरण कर रहा हूं। https://medium.com/the-web-tub/creating-your-first-vue-js-pwa-project-22f7c552fb34

गाइड बताता है कि डिस्टेंस डायरेक्टरी में पुरानी और अप्रयुक्त फाइलों को हटाने के लिए प्लगइन का उपयोग किया जाता है। मैंने पहले ही const CleanWebpackPlugin = require('clean-webpack-plugin') की जगह लेने की कोशिश की है const CleanWebpackPlugin = require('clean-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin') साथ const { CleanWebpackPlugin } = require('clean-webpack-plugin') जो कुछ पोस्ट्स का सुझाव देते हैं। मैंने भी https://github.com/johnagan/clean-webpack-plugin पर दस्तावेज़ीकरण देखने की कोशिश की है, लेकिन सक्सेस के बिना, क्योंकि मैं इसके लिए बहुत नया हूं।

जब मैं npm run dev कोशिश करता हूं तो मुझे यह त्रुटि मिलती है

    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)

और यह 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
  }
});

डॉक्यूमेंटेशन में बताए अनुसार सही इम्पोर्ट का उपयोग करने पर मुझे मिलने वाली यह त्रुटि है:

      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) 

अगर मैं webpack.config.js में लाइन 56 को हटाता हूं, तो मैं वेब एप्लिकेशन को समस्याओं के बिना चला सकता हूं, लेकिन मैं इस मुद्दे के स्रोत को समझना चाहता हूं


मेरा आज भी यही मुद्दा था, अभी। जैसा कि आप बता सकते हैं, डॉक्स और वास्तविक कोड के बीच एक बेमेल था। और वास्तव में, आप अंतिम प्रतिबद्ध में देख सकते हैं कि वे दोनों दस्तावेज में विलय हो गए हैं :

और कोड के लिए भी:

इसलिए मैंने सिर्फ const CleanWebpackPlugin = require('clean-webpack-plugin') से स्विच किया है। const CleanWebpackPlugin = require('clean-webpack-plugin') है

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

और यह ठीक काम करता है।

मुझे लगता है कि आप चीजों के बीच फंस गए होंगे। Npm पैकेज को पुनर्स्थापित करें और फिर से प्रयास करें, यह काम करना चाहिए।

मैंने लिखा कि आप उनके सार्वजनिक भंडार में क्या देख सकते हैं क्योंकि बहुत बार जब अचानक इस तरह के बदलाव होते हैं, तो आपको रेपो में अपना जवाब मिल जाएगा, शायद आखिरी बार। और आपके द्वारा उपयोग किए जाने वाले कोड को पढ़ना अच्छा है, खासकर अगर यह आपके मुद्दे का निवारण करने में आपकी मदद करता है :)


इस आयात का उपयोग करने का सही तरीका है:

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

और फिर वितरण फ़ोल्डर के साथ एक सरणी पारित करने के बजाय, इसे बदल दें

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

अद्यतन के साथ आपको इसे शामिल करने के लिए निम्नलिखित करने की आवश्यकता होगी

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

फिर प्लगइन्स की सरणी में निम्नलिखित जोड़ें

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

साथ में

plugins: [
     new CleanWebpackPlugin(),
]

जैसा कि अद्यतन के साथ किसी भी पैरामीटर को पारित करने की आवश्यकता नहीं है क्योंकि यह वेबपैक के आउटपुट के अंदर सभी फ़ाइलों को हटा देगा। output.path निर्देशिका, साथ ही साथ हर सफल पुनर्निर्माण के बाद सभी अप्रयुक्त वेबपैक परिसंपत्तियां।