web-dev-qa-db-ja.com

TypeError：CleanwebpackPluginはコンストラクタではありません

私はvue webpack-server-devを介してWebアプリケーションをプレビューしようとしています。このガイドに従っています https://medium.com/the-web-tub/ creating-your-first-vue-js-pwa-project-22f7c552fb34

このガイドでは、プラグインを使用して、distディレクトリ内の古いファイルと未使用のファイルを削除することを説明しています。私はすでに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行目を削除すると、問題なくWebアプリケーションを実行できますが、この問題の原因を理解したい

javascriptvue.jswebpackwebpack-dev-server
37
ECallpani

正しいのは、このインポートを使用することです。

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

そして、配布用フォルダで配列を渡す代わりに、それを次のように変更します

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

私は同じ問題を抱えていて、次の方法で解決しました：

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

更新を行うには、以下を実行してそれを含める必要があります

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

次に、プラグインの配列に次を追加します

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

と

plugins: [
     new CleanWebpackPlugin(),
]

更新では、再構築が成功するたびに、webpackのoutput.pathディレクトリ内のすべてのファイルと未使用のwebpackアセットがすべて削除されるため、パラメーターを渡す必要はありません。

14
Tom Maton

私は今日、同じ問題を抱えていました。ご覧のとおり、ドキュメントと実際のコードの間に不一致がありました。そして実際、あなたは 彼らがマージした最後のコミット 両方でドキュメントを見ることができます：

enter image description here

そしてまたコードに：

enter image description here

だから私はconst CleanWebpackPlugin = require('clean-webpack-plugin')から

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

そしてそれはうまく働きます。

あなたは物事の間に巻き込まれた可能性があると思います。 npmパッケージを再インストールして再試行してください。正常に機能するはずです。

このような突然の変更が発生すると、頻繁に自分の答えをリポジトリで見つけることができるため ）、おそらく最後のコミットで。そして、特に問題のトラブルシューティングに役立つ場合は、使用するコードの一部を読むことをお勧めします。

13
Carles Alcolea

nativescript-vueへの最近の更新でこのエラーを見つけた人のために、webpack.config.js（アプリフォルダーの最上位ファイル）。上記のように、CleanWebpackPlugin docs の構文を反映します。

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

そして

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

私はウェブパックにあまり慣れておらず、現在それを学んでいます

以下のことは私が問題を解決するのに役立ちましたが

Clean-webpack-pluginをアンインストールして、依存関係として再インストールする前に、これを開発依存関係としてインストールしました

アンインストールしてそのようにインストールした後：npm install --save clean-webpack-plugin

これを追加することで

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

私の問題を解決しました!!

それが役に立てば幸い

3
Amir Ali

CleanWebpackPlugin v3.0.0

デフォルトのエクスポートを名前付きエクスポートCleanWebpackPluginに置き換えました

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

正しいコードは次のとおりです。

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

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